Mobile layout issues

Hey Hudavi,

Please check the column settings. The column has 140px padding set which is causing the width of the content to shrink in the mobile.

You add a custom CSS class name and set max-width to the columns instead of padding :)

.my-custom-width-column {
   max-width: 860px;
}

Enable custom CSS class name from Enfold > Layout Builder > Developer settings

Best regards,
Vinay

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:

/* CSS - */

@media only screen and (max-width: 767px) {
.responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
 
 padding: 0px;

}	
}

Best regards,
Vinay

Hi Hudavi,

Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

Best regards,
Victoria

Hi Hudavi,

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:767px){
    .av-layout-grid-container {
        width: 100%;
        table-layout: initial;
        display: block;
    }
}

If you need further assistance please let us know.

Best regards,
Victoria

Hi,

Did you need additional help, or shall we close this thread?

Best regards,
Jordan Shannon