How do I make my Header look normal when viewed by Mobile Phones and smaller Screens? In addition to your cornerstone advice can you provide common CSS that will resolve related issues?
Hi There,
On The Header and Footer builders, the responsiveness is not automatic as on X legacy header.
Every Bar, Container or Element. you have a Customize tab, on this tab, you will find hide based on screen size option.
So you will hide or let the elements appear according to your screen size.
So for example, as your inline menu does not fit mobile, you will hide it on mobile, and add a menu element, like the slide in or modal, which is suitable for mobile, this menu you will hide on every screen width where you want to use the inline menu instead.
Hope it helps
So can I make 4 of the same header and assign each to a specific screen size? Right now my site only looks good in 480px and smaller.
Hi There,
No, you can make different headers and assign to different pages.
For the different screen widths, you need to hide the elements which you dont want to show on each screensize width by clicking on the customize tab, of each element on the header builder.
Hope it helps!
but my current setup should look mobile optimized for all mobile resolutions if I look with my phone horizontal it doesn’t look right like it does vertical
1 Like
Hi There,
Although the standard is to use the mobile browser in Portrait position, if you want to adjust the landscape position you can use the Portrait table Hide based on screen width to adjust it.
Hope it helps
I am having the same issues as the OP here. Site looks terrible in portrait (text too small to read, everything flattened out). www.shapesmithandwell.com
Please tell me more about “Portrait table hide”. This is the first time I’ve come across it, but it sounds like the solution to my site issues. Thank you Joao
Hi @Shapers101,
It’s Hide During Breakpoints like in the screenshot, it’s used to hide specific row, contains, columns or elements, example, you can have two elements of the same content but with different styling. One element with bigger texts is hidden from desktop (using Hide during breakpoints option) but of course displayed on mobile. Then another element of same content but smaller font is hidden from mobile but displayed on desktop.
But if it’s just about text size, how about just changing its font size with this value
calc(14px + 2vw);
It will respond on device’s width, and it’s just a sample. You can apply your own pixel and VW value depending on your preferred size.
Thanks!
Hi Rad and thanks for your reply.
I’m afraid I do not know where to place the "calc (14px + 2vw); that you’ve kindly told me about.
The big issue on mobile is not that things need to be hidden as they cannot be seen properly.
The text below “Teaching is my happy place” does not display helpfully in portrait, but works in landscape. Would the element you’ve given me above work to fix this issue?
I’m using a Design Cloud template btw.
Thanks in advance 
.
Hi @Shapers101,
Which Desgin Cloud template are you using?
Would you mind creating a separate ticket and providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:
- Link login to your site
- WordPress Admin username / password
Thanks.
Hi @Shapers101,
Sorry for the confusion, I thought you only have issues with font responsiveness as I assumed you already configured them but not just working. But to answer your question, you can add that to any v2 element where font setting is applicable.
But, the real issue is your typography setting and it’s set to 1px on mobile devices. Please change it to 14 in Theme Options > Typography
Thanks!
1 Like
Thanks for that Rad - it worked a treat
Glad it worked.
Cheers!