@Thinkjarvis and @Ismael

Thank you both and at least I know I’m not going crazy. :) I wouldn’t worry about the original code, per se – I have the code from my prod site, which is my real baseline. I’m still getting pink text in the hero on the mobile, so something still isn’t right… and my layout shift is still the same on mobile and bigger on desktop :( Do you want me to “reset” the CSS so that we can start over?

I REALLY appreciate the help…. I can’t tell you how frustrating/upsetting this is to me. I’ve been trying to solve this for months!

thanks,
Shari

Hi @Mike,

Thank you for taking the time to look at this! Unfortunately, I need more information. Forgive me, as I am just a beginner with CSS… but I do website optimization/UX for a living! So… google jail is my own term. I’m not technically in jail – but google is giving me some serious side-eye and I can see clearly in my core vitals that I need to address my LCP and CLS issues. My LCP issues are on mobile only. (and maybe I should have said that?!!? If so, I’m really sorry about that… rookie mistake?)

Ok – can you share with me the changes that you made? I need to better understand them – and learn… and some of them caused issues. Fonts are turning pink where they should not be and the ribbon offset was on purpose! (aren’t we artistic?) Meanwhile… it looks more offset than ever before. If I can see what you did – maybe I can figure out what’s causing things to be funky. Was it all in Quick CSS?

Also – it doesn’t appear as if much has changed on my site. CLS and LCP are still the same. I can’t make your image bigger and see anything, unfortunately. I looked at my own report on GT Metrix and can see tss_banner-mobile8-1 loads second to last. It’s the hero image on mobile. The desktop hero images loads earlier, but I can literally see it fill in later as the page loads. I think I’m having this problem on a lot of my pages – where the hero image is loading last, but one problem at a time? Or is it all one problem?

I would like my LCP to be <2.5s and CLS <.1.

And, for whatever reason, my actual site: https://www.thestrapsaver.com is performing a little better (I’m not getting render blocking resources errors) – but has the exact same LCP and CLS issues. It looks mostly as I want it to – although I like the idea of removing the white space below the hero image, so I’d like to know how you did that!

Also – can you point me to a tutorial for sharing images? for some reason, I can’t seem to do that!

I would really appreciate any insight that you might have for me!

Thanks,
Shari

@Guenni007: I’m sure that there are tons of problems with my site. As I said, I’m not a developer. Not. Even. Close. The woman that hired to work on my site disappeared without completing it, including optimization. I’m simply trying to fix the things that I notice so that I can get out out of google jail.

So if the images are off- I don’t even know how to solve that. I do know that google is penalizing me for LCP issues…. which is why I want to get layerslider to load earlier. Then I can tackle the rest of the issues – or are they related?

Thanks again for your help!
Shari

edited to add: that image issue is due to something else I’m trying to fix with CSS…. so don’t mind it, it’s not how my regular site is! :) But thank you for noticing.

• This reply was modified 4 years ago by sldeutsch.

@Guenni007 and @Yigit: I wasn’t clear, I figured out how to make the fullwidth easyslider, but I’m having trouble getting it to have the proper spacing on the page. (either too much or not enough white space between it and the ribbon at the top) Regardless, fullwidth easyslider ALSO loads last. I feel cursed!

Instead of trying to deal with a whole new element + the loading issue, I thought there might be a way to get this to load in-line instead of last. I can’t be the only one with this problem. If that is not the case, then I’ll build the full-width easy slider, but then I’ll need help getting the spacing right. Gah… so frustrated! (feeling helpless because I just don’t know things…)

Thanks,
Shari

Hi @thinkjarvis and @Ismael,

Thank you so much for the information – but it must be user error – I put in both pieces of code in the Quick CSS in the child theme and neither made a difference. My CLS is the same. Is there something else that I need to do? Did I put it in the wrong spot? (maybe within layerslider?) I’m such a beginner – which is why I purchased support. (my developer abandoned me!) I’m not sure if there is a better way to reach the team?

Thanks,
Shari

It’s not working, but it could be me. This is what the code looks like:

#hero-slider .slideshow_caption {
    width: auto;
    height: 170px;
}
@media only screen and (max-width: 767px) {
#hero-slider .slideshow_align_caption a {
  float: right; 
#hero-slider .slideshow_align_caption .avia-slideshow-button {
    visibility: visible;
)
}
}

I put this in – thank you – and it’s right on desktop, but when it switches to mobile, the button moves to the left site. (you can see it in place now on https://dev2.thestrapsaver.com/full-width-easy-slider-test/)

I was having difficulty getting a button on the lower right with either of those. How would might I do that?

Thanks!
Shari

We’re trying to set the background image as the pink pattern – with the white area for text. I’m having trouble with that as well.

So far, not much: https://dev.thestrapsaver.com/ – I literally just installed the new theme on the old site.

These are the first two elements that we tried, without luck (these are the two that make our site unique)

Thanks!!