[Resolved] Adjust home page in mobile version

[Steven]

Hi,

My home page looks good on the desktop version, but the mobile version is all messy.
I have problems with the size of backgrounds and the text I have on them doesn´t fit in correctly. Also, the columns don´t look good either.

How can I fix this?

Many thanks in advance!

Steven

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Steven]

http://www.olakinonutricion.com

[Leo]

Background images are one of the trickier element to deal with as it’s not responsive by nature – not a theme thing. What would be the preferred solution here?

As for columns, since they are coming from a plugin, you will need to check with the plugin support.

[Steven]

Could I remove the text inside the background image and put it on top of it as a heading but just on the mobile version?

[Leo]

You cannot move them like that.

But you can add the same text twice and use the built-in hide-on class to hide one or another:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

[Steven]

Thank you Leo, that´s a great idea!

However, where exactly do I have to insert the hide-on-code?

I´ve written the same text as in the background image and I´m trying to insert that code in the additional CSS class it comes up when you open that block but it doesn´t seem to work

[Leo]

If you are just using the paragraph block then you can add the class to eh Additional CSS class(es) field:
https://www.screencast.com/t/AylFNZVMvsQb

[Steven]

Works great like that Leo!

Thanks a million!

[Leo]

No problem 🙂

[Author]

Posts