Mobile content not displaying correctly – (Celestial Lite theme)

You’ve got some squished content happening but as a result of how you did your columns further below on the front page. They are not responsive. The best way to do this is to use inline columns like this:

Celestial Inline Columns

That should make your inner columns work. As for zooming, I was able to zoom your page content on my iphone.

Thank you so much! The Celestial Inline Columns work great!

Do you possibly know how to fix the display problem of a <hr> tag in Firefox? It looks great in IE and Chrome, dividing the top half of the main page and the bottom half. Firefox, instead of displaying the horizontal rule across the whole content area, pushes the <hr> up to the right and extends beyond the main area to the right.

https://enlivenedbeings.com/

(The same <hr> problem is also in the desktop version of Safari, although it is working great on the mobile version on iPhone.)

Actually I do…and it looks like my fault. The HR styling in the theme’s style.css has this around line 309:

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin: 24px 0;
}

For firefox, it should have this added to it:

clear: both;

So if you are running a child theme or have a plugin that allows you to add custom css, you can add that missing clear: both; part to it.

By the way… were you wanting 100px padding on the container for your banner image you have on your front page? I see you have added 100px to this:

#st-header-image {
position: relative;
border-bottom: 5px solid #BCC0C3;
padding-top: 100px;
}

I’m guessing you made some edits to the theme’s style.css? Best to use a child theme because as soon as you update Celestial Lite, any modifications you made to any theme files will be lost.

Hi,

Thank you so much for all the help! It works great now!

Thanks for pointing out the padding; I deleted it.

You’ve been very helpful!

You’re very welcome… I’m assuming this topic can be changed to “Resolved”?