Formatting Site for Mobile

[dwg33]

My site, that is under construction, looks good on my desktop and it looks good on my mobile device if I select desktop mode. But when looking at it on my mobile phone, not in desktop mode, I have two problems. One is that the navbar menus options no longer appear (I just see three short, horizontal lines that if I touch display the menu options along the side of the screen, overlapping content, which of course is not what I want).

The other issue is in a section with three rows. The first row is a centered header (header1). The second row has two columns and centered in each is a header (we can call them header2a and header3a). The third row also has two columns and in each is a text box (box3a and box3b) centered under their respective headers of the second row. When displayed on a mobile device I see the first row header correctly and underneath that header2a, under that header2b, then text box3a and then text box3b. Turning my phone horizontally allows header1 to expand out instead of wrapping but it makes no difference on how the next two rows look. It looks good on the desktop. I assume I have to change my width of the rows (section?) for mobile devices but don’t know how to do that to make it worked. I looked on the forum and added different css lines of code and changed some margin widths but clearly what I did had no impact.

Here is the website: https://davidgraucoaching.com/

Thank you.

[thai]

@dwg33

My site, that is under construction, looks good on my desktop and it looks good on my mobile device if I select desktop mode. But when looking at it on my mobile phone, not in desktop mode, I have two problems. One is that the navbar menus options no longer appear (I just see three short, horizontal lines that if I touch display the menu options along the side of the screen, overlapping content, which of course is not what I want).

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

@media (max-width: 979px){
    .masthead-stacked .x-navbar {
        height: auto;
    }
}

@dwg33

The other issue is in a section with three rows. The first row is a centered header (header1). The second row has two columns and centered in each is a header (we can call them header2a and header3a). The third row also has two columns and in each is a text box (box3a and box3b) centered under their respective headers of the second row. When displayed on a mobile device I see the first row header correctly and underneath that header2a, under that header2b, then text box3a and then text box3b. Turning my phone horizontally allows header1 to expand out instead of wrapping but it makes no difference on how the next two rows look. It looks good on the desktop. I assume I have to change my width of the rows (section?) for mobile devices but don’t know how to do that to make it worked. I looked on the forum and added different css lines of code and changed some margin widths but clearly what I did had no impact.

Please move your custom headlines to the columns contain the text. So on the mobile it should looks like this screenshot:

Hope it helps

[jamiegrichards]

Finally, I disabled all plugins but those that are bundled with the X-Theme and I’m still having the issue.

[dwg33]

Worked great! Thank you.

[christian]

You’re welcome. Glad we could help.