Mobile Layout — or lack of completely!!

[Avishekks]

Hi all, I have two questions this morning.

1. After learning CSS for three days and making small changes here and there, I finally released my site out of maintenance mode. But then, on mobile, the results were horrendous. View my site on desktop vs mobile and you'll see.

Here is an image of the mobile site right now.

Any idea what to do here?

2. In addition, when I view the full site on my phone (iphone 6, shouldn't matter), it looks like this

Why is there a bit of extra space above my header and the background? How do I fix that? And secondly, this point isn't super important once I get the mobile site to work, but I'd like to change the way the text looks on the Front Page 1 section (using Monochrome Pro). The first word is "follow" and as you can see it's not spaced out very well.

[tarmadillo]

To get rid of the space at the top change .site-header from top: 5; to top: 0;

as for your mobile issues it looks like you enabled Jetpack's mobile site option.

To access the Mobile theme options:

Visit Jetpack -> Settings -> Writing tab and scroll down to the Theme Enhancements section in your Dashboard.
Find the “Enable the Jetpack Mobile theme” option and click the dropdown arrow.
Select your desired options, then click Save Settings.

---

https://armadillowebdesign.com

[Avishekks]

Wow...thank you. That solved the issue. How did you figure that out? Does it say somewhere on the site? Or were you able to tell by the way it said "mobile version" on the bottom?

Ok well that brings me to part II. As you can see in the image above where the text says "Follow," it doesn't display too well. Which part of the @media queries does this correspond to?

[tarmadillo]

I checked the scripts you were running using the browser inspector to see if you had a plugin since I never see separate mobile sites with wordpress. You had something called device-px-jetpack.js which sounded about right so I looked it up.

You are using span tags in your html so if you try to change it in the css it wont work since inline css takes priority.

instead of doing this:

<p style="text-align: center;"><span style="font-family: vidaloka; font-size: 120pt;"><span style="color: #9e6c00;"><span style="padding: 10px; background-color: #ffffff; line-height: 1;">Follow </span></span></span></p>

try doing something like this:

<h2>Follow</h2>
<h2>Your</h2>
<h2>Body</h2>

and then target them together in your css:

.front-page-1 h2 {
    text-align: center;
    font-family: 'vidaloka';
    font-size: 120pt;
    color: #9e6c00;
    padding: 10px;
    background-color: #fff;
    line-height: 1;
}

Then it looks like the font breaks around 550px wide so I would go to the section that says @media only screen and (max-width: 600px)

and you can add:

.front-page-1 h2 {
    font-size: 90pt;
}

or whatever font-size works.

the benefit is that you can just change the style in one location and and it will affect all three of those h2 elements instead of having to change each span

---

https://armadillowebdesign.com

[Author]

Posts