Thank you so much!! I really appreciate the help. I would love to have the arrow background be transparent and the arrows be #ee1d85. I tried to do this myself and only managed to either do nothing or make the arrows disappear.

If this helps, here is all of the Quick CSS that I can find about the arrows.

From the top:

#top .avia-slideshow-arrows.avia-slideshow-controls a {
    background: #a6a6a6 !important;
}

#top .avia-slideshow-arrows.avia-slideshow-controls a:before {
    left: -4px;
}

From the middle of the file:

/* === STYLING SLIDER ARROWS === */

#top .avia-smallarrow-slider .avia-slideshow-arrows a {
   color: #ed1d84;
}

.prev-slide:before, .next-slide:before {
   background-color: transparent !important;
   margin-right: 15px !important;
}

#top  .avia-slideshow-arrows.avia-slideshow-controls {
width: 100%;
position: absolute;
top: 65px;
transform: translateY(-50%);
width: 100%;
z-index: 999;
}

/* Right arrow*/
.avia-slideshow-arrows.avia-slideshow-controls .next-slide {
right: 0 !important;
bottom: -10px;
}

/* Left arrow */
 .avia-slideshow-arrows.avia-slideshow-controls .prev-slide {
left: 0px !important;
margin-right: 20px !important;
}

Ok, what did I do wrong? :) I couldn’t find the code that you suggested to remove and added the one that you suggested to add and nothing changed.

This is the current CSS code that I have for the the sliders:

#top .avia-slideshow-arrows.avia-slideshow-controls a {
border-radius: 25px;
font-weight: bold;
font-size: 18px;
background:#transparent;
width: 45px;
height: 30px;
}

I also tried to change background from #transparent to #a6a6a6 !important but still nothing.

Thanks again!

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, 9 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?