Looks terrible on mobile

I just made my website with Pro at www.meganeholstein.com, and I have a few questions:

  1. My headers look terrible on mobile. How do I fix this?
  2. How do I achieve the same single post design as markmanson.net (example: https://markmanson.net/attention-diet)

More generally speaking, how do we make mobile designs with this theme? Some themes I’ve had very naturally adapt to mobile, but not this one.

Megan

Hi Megan,

Thank you for writing in, generally, PRO and X theme are mobile responsive as well. With regards to the header, there are configuration needs to be done because that is a custom header.

For example this bar:

Those logos were squeezed in the Container because the Container is not set to wrap children (unless that is the layout you’re after)



Another thing with this is since your logos will wrap after that wrap children turned on. Your bar needs to have the appropriate height. Please set your Bar’s height to auto.



Another issue is the Navigation Inline on mobile, that menu is not designed to be used on mobile view. Please add a Navigation Collapsed or Navigation Modal (whichever you like) next to your Navigation Inline, then use the Hide During Breakpoints feature on those elements to switch them between desktop and mobile.

More details about how the header and footer builder works here.

Then this text,

It would be better if you set this as Text Align Center.



Regarding the design of the single posts, this part.

Please recreate this as your secondary header, you can create it from scratch or duplicate your current header. Then assign that header to your Single Posts. Add this on your Header CSS area to remove the Title and Featured Images that are on the content area.

.single-post .entry-header,
.single-post .entry-featured {
	display: none;
}

Hope it helps,
Cheers!

Thanks for the reply! That was somewhat helpful, but not completely. I’m still having problems with my main page header.

Also, with regards to the All Posts header, I would like it to display the Post Title and the Featured Image as the background. How can I do that?

Hello Megan,

In your header, the first bar, you have inserted two containers. One for the logo and the other for the navigation inline element. Please be advised that the navigation inline element is only good for desktop screens as it displays the menu items inline. As soon as the screen gets narrow, there will be no enough room for the items to display. This is why we recommend that you also add navigation layered or navigation collapsed element which will exclusively display for smaller screens. You can then hide the navigation inline element in smaller too. All of this is possible by utilizing the “Hide During Breakpoints” option in each of the element settings. To know more about it, you can check this out: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Another thing is that since you have added a 5em left and right margin of the text element, that will always display in all screen sizes. And this is why in smaller screens, there is only little space left to display the text. To resolve this, click the text element, find the “Customize” tab in the text element settings and insert this inline element css:

@media(max-width: 767px){
    $el.x-text {
      padding-left: 1.2em;
      padding-right: 1.2em;
    }
}

This code means that as soon as the screen size is less than 768 pixels, the left and right margin of the text element will now become 1.2em only instead of 5em.

Hope this helps explain and resolve your issue. Please let us know how it goes.

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