I was reading through other posts and they mentioned deleting css and problems still appearing… so I deleted this and it seemed to fix it:

@media only screen and (max-width: 454px) {
        .html_header_top.html_header_sticky #top.page-id-1471 #wrap_all #main {
    padding-top: 126px !important;
}
}

I’m guessing I put that in there to fix something else? Does that sounds right?

Hi – I took your “somewhere else” suggestion and found it in site identity under customize. It’s gone!

Now, definitely solved (until next time, of course :) )

Thanks again!
Shari

Woo hoo! It’s fixed! Thanks for the clear and simple instructions :)

I ended up optimizing the site – thank you for your help!

Thank you so much! It’s fixed!

Fixed! Thank you!

Hi Nikko-

Thanks – It seems to be working fine now but I have too much space between the hero image and the ribbon at the top – how do I make that white space smaller?

Thanks!
Shari

Please close it, but know now that I’ve got these two in sync, I’m going to be making other updates, so I’m sure more questions will be headed your way :) :) Thanks again!!

Thanks for reviewing this, Mike! I may not have put the right code on there, but the issue is with the ribbon. I got the code to fix it in https://kriesi.at/support/topic/header-issue-with-4-8-5/.

Here’s what I’m seeing:

Prod site (showing correctly):

Test site (not correct):

The ribbon is higher on the test site, but only on the /cart/ pages.

Hopefully that helps!

Thanks,
Shari

• This reply was modified 3 years, 2 months ago by sldeutsch.

Sorry for the delayed reply – I got caught up in other updates to the site (I’m sure you’ve been there, done that!) Thank you so much for your help!! :) I’m all fixed now!

Thank you – this helped with the magnifying glass, but it pushed the ribbon down too far. see https://staging2.thestrapsaver.com/cart/ vs. https://www.thestrapsaver.com/cart/

Any thoughts?

Thanks!
Shari

Hi @mike,

Thanks for the code changes – I keep thinking that I should just learn some basic CSS myself to get this stuff done. I did put a request out on codeable…. do you know of a good tutorial for defining container height with CSS? and, potentially stupid question – how do I know what the height should be?!?!

I did try to remove lazyload but I didn’t have any luck with that. I hate the idea of adding another plugin, I have worked so hard to ditch the ones that I have… but if it doesn’t slow things down and makes google happy, I might just do that. I keep seeing code to add to images to preload them (link rel=’preload’) but for the life of me, I can’t figure out how to implement it. See #9 in this article: https://wp-rocket.me/google-core-web-vitals-wordpress/improve-largest-contentful-paint/

I really appreciate all that you’re doing to help me!

Thanks,
Shari

@Thinkjarvis and @ismael: can you share the right code that you put in my site?

@Mike:

Thanks for the explanation in detail…. I will have to go through this later (it’s 9AM in New York and my regular job calls!) It looks to be incredibly helpful.

My quick comment is that I completely agree that the layerslider is OVERKILL for the hero. I hired someone who claimed that they knew more than they did… and again, disappeared. Blech. I have a friend who is a developer – but didn’t have time to redo my entire site (stupidly long story) and tried to put in an image with a button, but every time he did, it ended up in a container – which included formatting that he didn’t want (he couldn’t get it to go full screen). If you could point me in the direction of how to do this, that would be great. Do you think that will have the mobile image load earlier?

The thing is… I’m noticing that I’m having the “image load last” issue for our blogs – which don’t use layerslider. Here’s an example from the prod site: https://www.thestrapsaver.com/new-year-2021/.(the image is NewYearNewUs.jpg) – google is giving us grief on this one too.

if the image link doesn’t work: https://savvyify.com/img/image/yg7b

Do you have any thoughts on why or what we might do to get it to load earlier on the page? (again, this is mostly a mobile issue!)

I’m also changing hosting companies, which should speed things up.

Thanks again!
Shari

Hi –

I don’t know why you were blocked – I think maybe you tried the wrong user name? I just confirmed the credentials that I sent and they work! I’m sorry about that!

As for the CSS – I removed it because I thought I was breaking something – but I put it back in. Here’s what I did – I have no idea if it is right:

.home #layer_slider_1 .ls-wp-container, .home #layer_slider_1 .ls-wp-container .ls-inner {
    min-height: 272px;
    height: 272px;
}

.home #av_section_4 .container {
    min-height: 430px;
}

and then when I added the second part of the code (was I supposed to do that?) it turned the headline in the next section pink. To illustrate, I only added in:

/* Macbooks, 720p and ipad pros  */
@media screen and (min-width:1025px) and (max-width:1440px) {
.home #layer_slider_1 .ls-wp-container, .home #layer_slider_1 .ls-wp-container .ls-inner {
    height: 272px !important;

You can see the difference once the viewport is smaller than 1027px.

from this:

I can’t seem to get an image to appear, if it doesn’t…. https://postimg.cc/34qzPzPk
to

2nd image: https://postimg.cc/v4vkQ4JF

Whatever it is, I’m sure that I did it wrong!

Now what? :)

(also, can someone look at https://kriesi.at/support/topic/layerslider-loading-last/#post-1304065 – I’m not getting anywhere there and surely there is a quick answer?!!?)

• This reply was modified 3 years, 6 months ago by sldeutsch.