Website Responsive

Hi,

You don’t seem to be using any ‘media queries‘ to handle the responsive sections of your CSS.

For example, your ‘featured_title’ element is still set to a fixed width of 1370px, even when I view it on mobile. This is far too wide for a standard portrait phone display.

If you’re going to hand-code sites, and don’t have too much experience with responsive, I suggest you build on a responsive starter theme, such as underscores, which I’ve used on many occasions.

Have a read up on media queries in CSS, you’ll love them once you get the hang of it!

I have done responsive but not with wordpress.

It all works the same. WordPress still outputs HTML/CSS, so you can apply the same methods as you would with flat a flat HTML site.

You just need to identify where you’ve used fixed widths in your CSS and create appropriate media queries.

Your ‘header_container’ element currently has a fixed width of 1370px. So when you view the site on a device with a screen narrower than 1370px, you need to create a media query rule so that the element is resized …

E.g. If you were view it on an iPhone 5s in portrait mode (640px wide), you might use …

@media screen and (max-width: 640px) {
.header_container { width: 500px; }
}

Alternatively, you could look at using fluid widths (%) to handle most of the size changes and just use media queries when you want the content to stack properly for mobiles.

Ok thanks

I have found out that the repsonsive is not working because i was using google chrome which i dont understand about, when i used firefox it is working fine, do you know why?

And I know why because of display: block, google chrome doesnt like, it. Not sure what to use to replace that?