Responsiveness not working in Enfold

Hey wacky32,

Thank you for using Enfold.

1.) Did you set the Main Menu > Menu Items for mobile to the second option? It will enable the mobile menu when the screen width is less than 990px.

2.) Where can we see the issue? Please provide the actual link to the page with the 1/4 and 3/4 columns.

3.) Solution number 1 should take care of this as well.

Best regards,
Ismael

Hi,

Thank you for using Enfold.

1.) Use this code to adjust the mobile menu breakpoint to 1200px instead of 990px.

@media only screen and (max-width: 1200px) and (min-width: 768px) {}
  .responsive #top .av-main-nav .menu-item-avia-special {
      display: block;
  }

  .responsive #top .av-main-nav .menu-item {
    display: none;
  }
}

2.) Adjust the font size and word wrap property of the h1 element on smaller screens.

@media only screen and (max-width: 1200px) {
  /* Add your Mobile Styles here */
  h1.av-special-heading-tag {
    font-size: 20px;
    word-wrap: break-word;
  }
}

Best regards,
Ismael

Hi Susanne,

I couldn’t see anything obviously wrong with your site on mobile, could you post a screenshot highlighting the problem please?

Best regards,
Rikard

Hi Susanne,

You can upload screenshots to a service like Google Drive or Dropbox, then link to them here.

Best regards,
Rikard

Hi Susanne,

Thanks for that. I can’t reproduce the problem on my end using Chrome on Android though, in which device and browser are you seeing this happening?

Best regards,
Rikard

Hi Susanne,

Thanks for the update. I don’t have an iphone or ipad to test with unfortunately, but I’ll ask the rest of the team for help. Please reply to this thread so that it gets added back to our support queue.

Best regards,
Rikard

Hi,

You have following custom CSS codes

@media only screen and (min-width: 768px) and (max-width:905px) {
.av_textblock_section {
margin-top: -226px; !important;
}
}
@media only screen and (min-width: 906px) and (max-width:989px) {
.av_textblock_section {
margin-top: -203px; !important;
}
}
@media only screen and (min-width: 990px) and (max-width:990px) {
.av_textblock_section {
margin-top: -208px; !important;
}
}
@media only screen and (min-width: 991px) and (max-width:1170px) {
.av_textblock_section {
margin-top: -210px; !important;
}
}
@media only screen and (min-width: 1171px) and (max-width:1194px) {
.av_textblock_section {
margin-top: -185px; !important;
}
}

Please delete it.

Also, padding on your Grid cells with Text are defined as “50”. Please update them to “50px” and that should fix the issue :)

Best regards,
Yigit

Hi,

That seems to be related to your custom CSS in Style.css file of your child theme. Text displayed correctly when I commented out line 14th

height: 300px !important;

Please review your website :)

Best regards,
Yigit

Hi,

1- I increased the value of the white space to 250px
2- That was because you chose to hide the cell on mobile in Advanced > Responsive Settings.
3- I edited empty column elements in your section and chose to hide them on mobile.

Please review your website.

Regards,
Yigit

Hi,

You are welcome! Let us know if you have any other questions and enjoy the rest of your day :)

Regards,
Yigit