Fullwith header text & buttons not responsive on mobile phone.

Hey Leonsz,

We can fix it with a custom CSS code, but you need to provide us your website link with this problem.

Best regards,
John Torvik

Hi Leonsz,

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

@media only screen and (max-width: 479px) {  

.responsive #top .slideshow_caption h2 {
  font-size: 16px !important;
  }
.html_header_transparency #top .avia-builder-el-0 .slideshow_caption { 
     padding-top: 20px;
}
#top .avia-slideshow-button {  
    margin-top: 10px;  
    width: 44%;
}
.avia-slideshow-inner,
.avia-slideshow-inner li,
.caption_fullwidth.av-slideshow-caption.caption_center.caption_center_framed.caption_framed,
.avia-slideshow-inner li .avia-slide-wrap,
.avia-slideshow-inner li .avia-slide-wrap img  {
    min-height: 250px; !important;
}
.responsive #top #wrap_all .container {    
    width: 90%;
    max-width: 90%;
    }
 }

If you need further assistance please let us know.

Best regards,
Victoria

Hi Leonsz,

I was thinking about it, the font is set to 13px for buttons, I hesitated to make it smaller.
Here is the rule to be updated in the snippet above:

#top .avia-slideshow-button {
    margin-top: 10px;
    width: 44%;
    font-size: 11px;
}

Best regards,
Victoria

Hi Leonsz,

In the private box I attached a screen shot of what happens when I add this code to custom.css in the browser

@media only screen and (max-width: 479px) {  

.responsive #top .slideshow_caption h2 {
  font-size: 16px !important;
  }
.html_header_transparency #top .avia-builder-el-0 .slideshow_caption { 
     padding-top: 20px;
}
#top .avia-slideshow-button {  
    margin-top: 10px;  
    width: 44%;
    font-size: 11px;
}
.avia-slideshow-inner,
.avia-slideshow-inner li,
.caption_fullwidth.av-slideshow-caption.caption_center.caption_center_framed.caption_framed,
.avia-slideshow-inner li .avia-slide-wrap,
.avia-slideshow-inner li .avia-slide-wrap img  {
    min-height: 250px; !important;
}
.responsive #top #wrap_all .container {    
    width: 90%;
    max-width: 90%;
    }
 }

Do you mean the whole code is breaking or the last small snippet I gave you? When adjust the code to work only on certain page. Can you specify the page you need this working?

Best regards,
Victoria

Hi Leonsz,

We’re always glad to help.

For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/

And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/

For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you.

Thank you for using Enfold.

Cheers!
Sarah