Re: Issue with Ticket #1051026 (already closed)

Hi guys,

I fixed part of the problem.

I moved this CSS:

/*underline links body*/
.entry-content p a {
color: #000 !important;
border-bottom: 3px solid #fff200;
}
.entry-content p a:hover {
color: #80b7b3 !important;
text-decoration: none !important;
border-bottom: none !important;
}

from the Quick CSS area to the CSS Stylesheet for the child theme. Re-enabled CSS compression and it works on desktop and mobile.

Should I move all of my Quick CSS to the Child theme’s stylesheet? Would that fix the slider arrows on mobile piece?

This is the Slider arrows CSS:

/*slider arrows css */
#top .avia-smallarrow-slider .avia-slideshow-arrows {
width: 505px;
height: 50px;
display: block;
position: absolute;
top: 420px;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows a {
background: transparent !important;
color: #fff;
width: 50px;
height: 50px;
font-size: 50px;
font-weight: bolder;
}
#top .avia-smallarrow-slider .avia-slideshow-arrows a:before {
background: transparent !important;
line-height: 50px;
}

Is it possible that we need a bit more CSS that applies to the responsive rendering of the arrows?

Thank you so much in advance!

Havi

Hi Victoria!!

I was able to solve the underline/bottom-border issue (not working when CSS compression enabled) by moving the CSS code to the child theme’s stylesheet (from the Quick CSS). So that’s taken care of.

And the remaining CSS issue I noticed on mobile is on this post (on the slider >> missing right arrow and wrong position):

View post on imgur.com

See how the slider on mobile is showing only the left arrow (and way lower than it should be) and no arrow to the right? But if you look at the same post on desktop, it shows properly.

Am I missing more CSS or will this also get fixed if I move it to the Child theme’s Stylesheet? Is there a limit to how much CSS goes into the Quick CSS section?

Thank you so much!!

Havi

Hi Ismael,

I added this code on my staging site and now the arrows have completely disappeared on the mobile page.

@media only screen and (min-width: 768px) {
#top .avia-smallarrow-slider .avia-slideshow-arrows {
width: 505px;
height: 50px;
display: block;
position: absolute;
top: 420px;
}
}

Here’s the screenshot on mobile:

View post on imgur.com

This code used to work nicely on desktop and mobile. Something must have changed and it doesn’t work anymore. What should change here?

Thank you!

Havi

Hi Ismael,

I just went I did toggle it off, cleared the browser’s cache and still, they don’t show. It makes sense, doesn’t it? Now there’s no CSS for the arrows.

Havi

PS: Would you like me to send you the login credentials?

Sure, Ismael! Here you go!

Thank you, Ismael!! It worked like a charm!

Thank you, Victoria!

One more quick question: for some reason, changing the background color of the arrow does not have any effect on the actual rider arrow and it’s very visible if the photo is dark but you cannot see the arrow if it’s dark. Do we need to add a z-index css to the CSS code?

#top .avia-smallarrow-slider .avia-slideshow-arrows a {
background: #CC000000 !important;
color: #fff;
width: 50px;
height: 50px;
font-size: 50px;
font-weight: bolder;
}