Layout issues on smartphones and tablets with high resolution / landscape format

Hey willbaer,
Thanks for your screenshots and the screen sizes, for issue on the homepage (Screenshot_20230204-192115) where the text column is below the image column, I tried the different screen sizes above in my browser Dev Tools but I couldn’t recreate the issue, I don’t know why and I don’t have a real tablet to test on, but in my browser Dev Tools I did recreate the issue between 768px – 989px please see the first screenshot in the Private Content area.
At this size the text column and the image column seem to be on the wrong sides and the text column is below the image column with a white space created by an empty 1/4 column used as a placeholder for larger screens, to correct I tested this css:

@media only screen and (min-width: 768px) and (max-width: 989px)  { 
  #top.home #av_section_6 .entry-content-wrapper {
  display: flex !important; 
  flex-wrap: wrap !important; 
  }
  #top.home #av_section_6 .flex_column.avia-builder-el-54 {
      order: 1 !important;
      display: flex;
      margin-left: 0;
      margin-right: 4%;
      width: 46%;
  }
  #top.home #av_section_6 .flex_column.avia-builder-el-56 {
      order: 2 !important;
      display: flex;
      flex-direction: column;
      margin-top: 0;
  }
  #top.home #av_section_6 .flex_column.av_one_fourth.el_after_av_hr.first {
  	display: none;
  }
}

Please see the second screenshot in the Private Content area.
Please give this a try, if you see the same error at the other sizes you listed above you could try adjusting the media query size to match, if this is only occurring on devices in landscape mode you could add it to the media query like this:
@media only screen and (min-width: your-size px) and (max-width: your-size px) and (orientation: landscape) { ... }
Please try this and then we will look at your second issue in case I’m misunderstanding something.

Best regards,
Mike

Hi,
Try adding this css:

@media only screen and (min-width: 768px) and (max-width: 989px)  { 
  .responsive #top.home #av_section_6 .av_one_fourth.first + .av_one_fourth.flex_column_div.avia-builder-el-54 {
  	    margin-left: 0;
  }
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the feedback, I see an error on your site now and based on your last comment I believe that you added the css I posted above to the custom class field, please remove this and add the css to: Enfold Theme Options ▸ General Styling ▸ Quick CSS field, then clear your browser cache and any cache plugin, and check.

Best regards,
Mike

Hi,
When I check on mobile (425px) in landscape mode the image and text are lined up, please see the screenshot in the Private Content area.
Perhaps try clearing your mobile cache, iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
I also notice the column still has the error for invalid class name, please check that you have removed the css for the “custom class” field.
If you have trouble with this please include an admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
Thank you for the link to your site and your patience, for your homepage to make your image under Über mich line up over the lower paragraph on mobile in landscape, please try this css:

@media only screen and (max-width: 989px) and (orientation: landscape) { 
  .responsive #top.home #av_section_6 .av_one_fourth.first.av-hide-on-mobile.avia-builder-el-53 {
  	    display: none;
  }
}

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike