Top of home page text/buttons jumbled on phone

Support
#1

I just rebuilt the home page of my website and the top portion is all jumbled around when being view on a mobile device. The rest of my home pages looked good. How can I fix this?

Thanks,

Home Page

#2

Hi There,

Thank you for writing in! Are you referring to this?


Please adjust the line-height of that paragraphs. Regretfully, I can’t identify where is your current line-height styling is coming from because your CSS is minified.

Also please clear your caching plugins, your browser’s and your minifier plugins.

Thanks,

#3

Yes that is the issue (picture). I did modify the line height for both the paragraphs shown and there is a little CSS for the buttons. Here is what I used.

line-height: 8px;
(posted under Style in the “Column Settings”) - where my text box is located

display:block; width:200px; margin-left: auto;
(Posted under Style in the BOOK A CONSULT “Button Settings”)

display:block; width:200px; margin-right: auto;
(Posted under Style in the LEARN MORE “Button Settings”)

Let me know what I should change.

Thanks!

#4

Hi There,

Line height value 8px will not work. To understand better, see this: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height. Minimum value should at least be the font size set for the text. The text OPTIMIZE YOUR HEALTH font size is 24pt then you have force the line-height to 8px which is too short. Other value can be 1.2 like line-height: 1.2;

The used value is this case is unitless multiplied by the element’s own font size (24*1.2). The computed value is the same as the specified . In most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance.

See this: https://screencast-o-matic.com/watch/cFnf0HoBeb
1.2 is too much so I tried 1.

Hope this helps.

#5

Thanks for the help. I tried doing what you said and changing the line height to 1px. However that actually made it much worse. (text scrunched together more) which is strange cause on your video demo it seemed to work well. I ended up changing my line-height from my original 8px to 20px and that seems to do and look well and both pc and mobile.

However I still have a problem with my buttons not being centered on mobile. I wanted the buttons to be towards the middle of the content. I have the content split into two columns with left button to the right and right button to the left of their content boxes to put them next to each other. Since on mobile side by side content is stacked I understand why it looks off but it there a different way I can place those buttons so it does not look like that on mobile but still looks similar on PC?

Thanks for the help so far.

#6

Hi There,

On each column you have placed the buttons, click on the column and click on the text-align center.

You also have added very big gaps under each button.

I would suggest adding 20px gaps under each button and adding more padding to the bottom of the section.

Also setting your padding as % instead of px helps when it comes to responsiveness.

Hope it helps!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.