Docs

[Leanna]

Hi, I have gone through about all of the posts on this topic but my issue hasn’t been resolved. Please see my issue at http://www.tellasia.org/what-we-do, scroll down to where there are four large bg images with text over them. They look fine in pc but mobile fails to downsize the padding I had to add to keep the bg image visible despite little content. In Custom CSS I’ve added:
/*BACKGROUND IMAGE RESIZE & REMOVE PADDING*/
@media screen and (max-width: 790px){
.x-section {
background-size: 150% 40% !important;
padding: 10em 0 !important;
}
}
but this passing code doesn’t seem to be removing the padding, also my size in mobile results in the text covering up the image.
thanks for your help.

[Leanna]

This reply has been marked as private.

[Leanna]

ps Ihad to remove the code as it was messing up the view on my other pages on mobile

[Rupok]

Hi there,

If you still need any help, feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

[Leanna]

The issue is not solved at all! Please help.
Here’s another example:
http://www.tellasia.org home page – I have a diagram halfway down that is the bg image of a column, and to get the vertical space I set Padding but then in Mobile View Ihave a huge space under the image. I think I need site-wide custom CSS to reduce padding of Section and Column bg images in Mobile by 50% or so

[Joao]

Hi There,

You have set 350px padding and that is what you are getting on mobile. px is absolute measure so I personally when it comes to this situations always choose to work with % instead of px . Please try changing from 350px to 30% and do the same for the other places where you are facing this issue.

Let us know how it goes,

Joao

[Leanna]

duuuu… thanks that worked.
However in mobile view the text that goes over the bg image covers up the main subject of the image. I’d like to move it under the image on mobile view only. Is that possible?

Also I have a 4-item grid at http://www.tellasia.org/about-us and I need to remove the padding and margin entirely from mobile view, just for this one grid on this page.
thanks

[Rue Nel]

Hello There,

To disable the overlay text on smaller screens, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 979px){
    .img_wrap .overlays,
    .mg_box .overlays > .mgom_layer, .mgom_graphic_wrap, .mgom_graphic_wrap > .mgom_layer, .mgom_txt_wrap {
      position: relative;
      top: auto;
      left: auto;
      padding: 0;
    }
}

And after checking the elements, it seems like you might be having an issue with a third party plugin Media Grid. Regretfully, we cannot provide further support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[Leanna]

ok another bg mobile resizing issue: on http://www.tellasia.org/what-we-do/ I’m ok with the way the bgs look in the four elements some distance down the page – rescue, educate, etc – they remain fairly big in mobile and overlap the screen horizontally. Fine. But my top image, with the thtie “What We Do” insists on fitting inside the screen when viewed on mobile. How do I get it to match those further down and remain large?

[Lely]

Hello Leanna,

Regarding the issue on the homepage, please do give us screenshot of what you want to achieve so we can check further.

Are you referring to RESCUE, EDUCATE, DISCIPLE, EMPOWER on the about us page? If yes, please try this CSS:

@media (max-width: 959px){
#mg_wrap_186 .mg_box {
    padding: 0;
}
}

If that CSS doesn’t achieve what you want, please do give us screenshot so we can help you better.

[Leanna]

thanks I’ll use that if I keep Media Grid. Currently i’m trying to get rid of Media Grid and just use images in order to improve SEO as I finally realized I’ve killed my page speed by piling in so many cool plugins.
I’d still like to know about this question:
On http://www.tellasia.org/what-we-do/ I’m ok with the way the bgs look in the four elements some distance down the page – rescue, educate, etc – they remain fairly big in mobile and overlap the screen horizontally. Fine. But my top image, with the thtie “What We Do” insists on fitting inside the screen when viewed on mobile. How do I get it to match those further down and remain large?
thanks!

[Rue Nel]

Hello There,

Thanks for the updates! In your “what we do” page, instead of using percentage padding, because you have set a 30% bottom padding, I would suggest that you use a gap element instead. This way, the gap element will control on how high is your section. You can even have two gap elements which is visible only on specific screen sizes so that you have more height control on different screen size.

Hope this make sense. Thank you.

[Author]

Posts