[Lauren @ OnceCoupled]

The class .genesis-responsive-menu is set to display: none; but that class is applied via JS, so the menu isn't hidden until that JS runs and adds the custom class.

You could set .nav-primary to display: none; but users without JS won't be able to see the navigation. You'd then need to use <noscript> to resolve that. 🙂

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

WordPress will automatically generate srcset for images and does not need to be enabled. There are a number of reasons an image may not have srcset, though. Some that I can think of off the top of my head:

• WordPress isn't up to date
• Srcset has been manually disabled via a theme function or plugin
• Thumbnails aren't being generated on your site
• The theme/plugin doesn't use native WordPress functions to display the image
• Thumbnails with the same aspect ratios don't exist

I'd say the last one is the most likely culprit, and appears to be the case for the demo site, but the default thumbnails generated by WordPress (soft crop; as set in the media settings) usually provide at least 2-3 options. Do you have an example URL from your site?

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

Yes, send me an email at the address listed in my signature. 🙂

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

Eva, can you share a link to your site? I'll take a look.

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

That's in your style.css file. Look for the selector .header-full-width .title-area, .header-full-width .site-title on line 948. 🙂

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

No, I'm talking about the width, found below.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

Line 1084: .header-image .title-area, .header-image .site-title, .header-image .site-title a

You have width set to 100%, which is forcing the menu below. Try changing it to 320px.

Then, you have float set to none. That should be floating left, so the menu can sit up on the same line.

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

That's in your functions.php file. Look there and you'll find it easily. 🙂

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

Hm, it may depend on how dynamic that layout needs to be. Are you using it multiple times? Is it just this one page? What are you putting in it?

A starting suggestion:

<div class="two-thirds first">
    // content inline-block or floated left to achieve two rows
</div>
<div class="one-third">
    // regular content
</div>

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

Your home page is likely using a template that forces the layout when you widgetize the home page. Your options:

1. Remove all widgets.
2. Edit the template.

Depending on what you want to do, you may consider opening a new forum post as the problem has changed and you're likely to receive better support with an updated title & question.

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

Yeah, I hoping Friday is a good day for the Lightning!

Thanks for the info on your particular host. Caching is good, as it makes your site faster, but since it's frequently handled a multitude of ways, it can be difficult to get around at first.

Glad you got everything sorted!

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

Haha, I do sleep, but I also welcome emails that distract me from tedious work tasks or losing sports teams.

I suspect you are right, there's some kind of caching at play. W3TC or CloudFlare or your host should all have some kind of way to clear that cache.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

If I look at your stylesheet directly, I see the changes, so there's some reason they aren't being pushed to your live site.
http://air-compressor-help.com/wp-content/themes/lifestyle-pro/style.css

There are also a couple other problems. Take a look at your CSS:

.site-header {
background-color: #76d2c5;
padding: 48px;
overflow: hidden;
}

and

.site-header {
background-color: #76d2c5;
padding: 0; /* <– this line */
overflow: hidden;
}

have the same selector, .site-header. They are modified versions of the same block of code. You only need one. Delete the second one, and replace padding: 48px; with padding: 0; in the first.

The same is true for .header-image .site-title a. If you look through your style.css file, you'll find that it exists further down the page. That second declaration is going to over write the first, which means even if your style sheet reloaded, it wouldn't work. Find that second statement and replace the single, changed line.

🙂

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

Could be a caching issue then... when I look at the live version of your style.css file, it doesn't have those changes yet.

As a side tip, I'd recommend getting rid of some of that white space, too.

.site-header {
	background-color: #76d2c5;
	padding: 0; /* <-- this line */
	overflow: hidden;
}

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

Apologies, I should have commented that line out, or explained it's use. The arrow is for your clarification only, and may mess up your CSS if it's pasted into your file directly. You should simply use:

.header-image .site-title a {
    float: left;
    min-height: 200px;
    width: 100%;
}

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

Looking at your site, it seems like you found where to place it! 🙂 As for the .header-image .site-title a bit, it already exists and you should be able to find it by searching (ctrl + f) your file. The line I pointed out should match the number that you've already changed in your functions file.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

You added that style into a media query, which is why is isn't showing. Paste it just before your media queries, instead.

As for your header image, I'm seeing that the image your uploaded successfully is 520 x 200, it's not quite as large at the area you specified. For it to show properly, you'll need to change the following:

.header-image .site-title a {
  float: left;
  min-height: 110px; <-- this should match the height in your functions file
  width: 100%;
}

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

Not a problem! Glad I understood what you were wanting. 🙂

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

I think you are looking for this:

.nav-secondary .current-menu-item a {
     color: #000;
     font-weight: bold;
}

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Lauren @ OnceCoupled]

Go into your functions.php file and increase the header image size that is included there. If you have a look at the file, it should be fairly easy to spot.

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Author]

Posts