Content Wider than Screen

CMS & WordPress
1

Hi Guys,

I have been using the Mobile-Friendly Test to make my website mobile friendly but it has failed two tests;

Content wider than screen
Links too close together

My website link is; http://crystal.mozyou.com

The website doesn’t look at all on mobiles.

I have added ,

// Enable HTML5 markup
add_theme_support( ‘html5’, array( ‘search-form’, ‘comment-form’, ‘comment-list’ ) );

So, am not sure on how to do the above.

Thanks

2

Here is my style sheet guys:

style.css (44.8 KB)

3

Anyone guys to offer suggestions. Thanks

4

It doesn’t look like you are trying to make this responsive or to utilize media queries. What’s your aim here? What are you testing this on?

5

@ralphm, thanks for your response. Am trying to make the theme responsive. Am I missing something in the CSS file? I added some media queries. If you look at the CSS file, you will see that it has media queries.

6

Ah, OK. The first time I looked, I didn’t see the media queries.

They can’t do anything until you add this to the <head> section of each page, so that’s the first thing to do:

<meta name="viewport" content="width=device-width, initial-scale=1">
7

I already added that to my functions php. And also now I have added it to the home and portfolio php files.

It’s still not responsive.

8

It hasn’t made it onto your live site, though. View source on your home page, for example, and search for “viewport”. It’s not there. That’s where it needs to be for the browser to do its thing.

9

If you look at the website, the homepage isn’t showing the viewpoint though the rest of the pages are showing that.

Also, the content is still being cut off.

10

It will need to show on the home page if you want media queries to apply to the home page, though. So I’d address that first.

11

I have managed to get the viewpoint to show in the header. But still the website isn’t responsive. The content is being cut off. I am not sure what am missing.

12

Retrofitting a desktop layout for smaller screens takes a lot of work. You can’t just resize the container and hope that all will be well. On a small screen, a lot of your widths are not overridden. For example, the first <header> is still set to width: 960px on small screens.

So you really have to go over every element and make sure that it has an appropriate setting for a small screen in your @media rules.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.