Issue with headlines on desktop vs. mobile

Hello,

I used the Classic Custom Headline with a gap underneat, and everything looks pretty good on desktop. The issue is when I go to mobile, the text is not centered on the background, and both headlines are next to each other and the content is below… my website is coastalcarolinaguide.com if you need to see what I am talking about. What code should I used to keep things in order and centered when viewing on mobile? Also, how do I shrink the amount of background color (basically, the height of the entire headline box) so that it’s skinnier? There is too much color above my text when viewing on desktop.

Thank you!

Hi There @mwandrus

Thanks for writing in! I have tested your issue and found the cause. Could you please try setting the background color within your custom headline element.

background-color:red;

So that it should render properly within your background.

Hope that helps.

Hi,

Thanks for your help! I will try this tonight. Will this also fix the issue with the headline not appearing in the correct order on mobile? For example, the headline “Recent Posts appears”, then the “About Me” headline is next underneath that, then the actual recent posts links appear underneath the About Me headline, and finally the about me text section is at the bottom. It should be Recent Posts Headline, Recent Posts, About Me Headline, About Me text section. I’m not sure how to set it up so it’s in the correct order when viewing on mobile.

Hi,

You need to add your headline on the same row as your recent posts and about me.

Add RECENT POSTS headline on the same column as your recent posts element then add ABOUT ME on the same column as your text.

With regards to background color, please add it to your headline element and not in your column element. Then add padding to make spacing equal.

Please add this in the style field of your headline element.

background-color:red; padding: 15px 0;line-height:normal;

Hope that helps

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