Hi Ismael,

Thank you for looking into this. I don’t understand either why the button is not visible on mobile devices :(

Following are the codes I have so far added in Quick CSS. Can you please tell me if there is any that is conflicting? I have never touched anything in the theme files.

Thank you so much for your help!

Regards,
Xandria

#top .avia-button-fullwidth {
border-style: solid!important;
border-width: 1px!important;
border-color: #fff!important;
}

.avia-section.main_color.avia-section-default div.container {
max-width: 100%!important;
width: 100%!important;
padding-right: 0px !important;
padding-left: 0px !important;
}

span.copyright a.xandria { color: #6e6e6e;}

.logo, .responsive .logo {
display:none;
}

a.avia-button.avia-button-fullwidth .avia_iconbox_title {
font-size: 14px !important;
}

.logo img, .responsive .logo img {
display:none !important;
}

.grid-entry .inner-entry {
margin-right: 14px;
}

.mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready .mfp-preloader {
background-color: #e3e3e3;
}

.html_modern-blog .avia-content-slider .slide-entry-title {
font-size: 1.7em;
}

.ls-v6 .ls-circle-timer { display: none; }

.html_elegant-blog #top .post-entry .post-title, .html_elegant-blog .avia-content-slider .slide-entry-title {
text-transform: none;
}

Thanks, that wil do the trick.
And what about the font and the font size ?

its okay I solved the font size with

#av-burger-menu-ul a{
font-size:18px!important;
}

As an FYI, here is everything I currently have in my Quick CSS the relates to the mobile header:

@media only screen and (max-width: 989px) {
.avia_transform .av_slideshow_full .avia-caption-title {
font-size: 1em;
}

.avia_transform .av_slideshow_full .active-slide .avia-caption-content {
font-size: 12px;
}

.av_slideshow_full li img {
min-width: 900px;
margin-left: 15px;
}

@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
background-color: transparent;
position: absolute!important;
}}
.slideshow_caption .slideshow_inner_caption {
top: -40px;
}
}

@media only screen and (max-width: 480px) {
.logo {
position: relative!important;
top: 13px!important;
}
#header_main .inner-container {
height: 120px;
}}

@media only screen and (max-width: 767px) {
.avia-caption-content {
display:none !important;
}
.responsive #top .slideshow_caption h2 {
font-size: 32px !important;
margin-left: -53px!important;
}
}

Thanks a lot.
I want to list “Ultrasonic Anemometer Home”. But Now list:
“Ultrasonic
Anemometer
Home”
/* CSS – Subtext on right */

#top .logo,
#top .logo a {
overflow: visible;
}
CSS below:
/* Subtext styling */
.logo .subtext h1 {
font-size: 25px;
color: #239ff7;
width: 120%;
top: 60%;
right: 20;
}

.logo .subtext {
position: absolute;
color: #239ff7;
top: 60%;
width: 120%;
right: 0;
transform: translate(120%, -50%);
z-index: 999;
}

Hi Victoria,

Yes, thanks – login is in private content below.

I would like the Script font (pollistons) to have line height of 0.5em on mobile only.

I would also like the sizes of the buttons to be reduced on mobile.

Thanks!

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