Docs

[nowherean]

Hi Themeco, for some reason my mobile version of the site writes one word on each line. If you go to the Home Page here >

http://www.ikavenergy.com (You will have to login to view the site)

You will see how:

1) Highest level of in Solar Energy and the text below it looks horrible. I don’t know why there is so much space on the sides but everything is stuck in the middle.

2) The buttons also don’t resize properly, like “Learn About Our Services”, the text is all the way on the bottom. Also “View Our References All Over Europe” the text on that button is really on the line even.

3) Background images that are used as parallax for the desktop version are resized to 100% so now the background shows through…

Can you please let me know what is the best way to fix these issues? I take it its CSS, right? Thank you! I will provide the password to login shortly.

[nowherean]

This reply has been marked as private.

[nowherean]

I think what I really need to understand is how to control the text size for mobile, and also how to make the text area wider so I could fit more copy. And of course how to style the buttons so the text doesn’t spill over.

Thank you!

[nowherean]

OK I understood the issue here. It has to do with adding margin on the desktop site, and the same margin is applied to the mobile. Is there a way to control independently CSS for mobile vs desktop?

[Christopher]

Hi there,

Please check your site URL as it doesn’t work anymore.

Thank.

[nowherean]

Yes the server was down due to technical reasons. Its up now. Thank you.

[Nico]

Happy to hear that.

Feel free to ask us again.

Have a great day! 🙂

[nowherean]

But can you please still tell me how to apply type size, etc to the mobile version separately from the desktop? Which CSS file would take care of that? Thank you.

[Paul R]

Hi,

Please remove margins and use gap element instead.

eg. You can add three gaps then set each one to be visible base on screen size.

http://screencast.com/t/Nmxe4xBT4

Hope that makes sense.

[nowherean]

Hello Paul, unfortunately you are not quite answering my question. I’m not asking about vertical gap, I’m asking about left and right margins. What happens is if I apply 80px left and right margins to a text box, the same 80px margin is applied to the mobile version.

I’d like to have an option to apply 10px left / right margins to my mobile version of the site. Otherwise the margins make the text display almost one word at a time.

Thanks

[Nabeel A]

Hi again,

You can add the following code in your Customizer:

@media screen and (max-width: 979px){
.x-container.width {
    width: 100% !important;
}
}

Hope this helps!

[Author]

Posts