- This topic has 14 replies, 2 voices, and was last updated 7 years, 7 months ago by
Andrew Misplon.
- AuthorPosts
- May 26, 2016 at 10:42 am #3538
serapkagaParticipantHi,
The menu for my website doesnโt reformat to conform to a mobile device. It stays in the desktop menu format. Can you please advise on how to address this?
May 26, 2016 at 10:47 am #3539
Andrew MisplonKeymasterHi serapkaga
Hopefully, you get the notifications for our new topic, apologies for the hassle before.
The challenge for mobile is that your background image is currently set to cover, ideally, it needs to be set to 100%, you’d then need to add no-repeat to the background. The way that you’re expanding the row to accommodate the image isn’t responsive, so once we change the background from cover to 100% your padding stays at 600px no matter the resolution so as the image shrinks, the space the image container takes up will stay the same. Phew, hope you’re still with me. Summary, you’d need to re-look at the way you’re handling that first image.
Have you tried inserting your image directly into the full width stretched row via the Visual Editor vs having it as a background as you currently do? In addition, try removing the
span
tag. Thanks ๐May 26, 2016 at 11:07 am #3545
Andrew MisplonKeymasterAnother option would be to use Meta Slider, create a new slider and insert a single slide. Then, edit the page in question and in the right column meta box called Page Slider, choose your new slider, you can also enable the stretch setting from that meta box. That’ll insert a full-width slider that’s right under the header. Meta Slider handles the responsive work really well so it’s an option worth checking out.
May 27, 2016 at 5:53 am #3552
serapkagaParticipantThanks, I changed it to the meta slider and that worked well.
Just another thing about the font sizes- the desktop version looks good, but the font sizes in the mobile version look huge. Particularly on the homepage, the business name is squished and so are the headings (welcome to…).
Is there any way for the mobile version fonts to be smaller so they fit the screen properly?Thank you for your help!
May 27, 2016 at 11:26 am #3555
Andrew MisplonKeymasterGlad to hear you’ve been making progress.
Sorry, I’ve lost your URL, please, could you send it again? Thanks.
May 27, 2016 at 6:21 pm #3566
serapkagaParticipantIt’s orthodynamics.ca
Thanks!
May 27, 2016 at 6:36 pm #3567
Andrew MisplonKeymasterThanks. Try adding the following to
Appearance > Custom CSS
:@media (max-width: 480px) { .resp h1 { font-size: 37px; } } @media (max-width: 480px) { .resp h2 { font-size: 32px; } } @media (max-width: 480px) { .resp h5 { font-size: 22px; } }
Adjust the font sizes as required, those are the existing ones. You can also change 480 to 680 or higher if you want the change to apply sooner.
May 30, 2016 at 11:45 pm #3570
serapkagaParticipantHi again!
It worked really well- thanks! I was wondering if there was a similar way of reformatting the main Header (the header-font in Theme Typography) so that the business names fits all on the same line?
May 31, 2016 at 11:45 am #3571
Andrew MisplonKeymasterSuper, glad to hear you’re making progress. Please, try adding the following to
Custom CSS
:/* Header */ .site-header .site-branding-container { max-width: 40%; } .main-navigation { max-width: 60%; }
June 1, 2016 at 11:08 pm #3576
serapkagaParticipantHi Andrew,
I added in the custom CSS but it doesn’t appear to have changed anything. On my phone the ‘inc’ is still beneath the company name.
Is there a CSS to change the font size of the mobile heading version but keep the desktop version the same?
Thank you!June 2, 2016 at 11:12 am #3578
Andrew MisplonKeymasterSure ๐ Try additionally adding the following rule to
Custom CSS
:@media (max-width: 480px) { .resp .site-header .site-branding h1.site-title { font-size: 1.7em; } }
June 2, 2016 at 10:11 pm #3582
serapkagaParticipantIt worked perfectly! Thank you so much!
June 3, 2016 at 1:41 pm #3637
Andrew MisplonKeymasterSuper ๐ Glad to hear that did the trick.
January 16, 2017 at 9:01 pm #5769
serapkagaParticipantHi Andrew,
I’m sorry to bother you again, but I have a quick question and wasn’t sure if I should start a new question thread or not.
What is the font that is used in the Puro theme?
Thank you!
January 17, 2017 at 5:07 am #5770
Andrew MisplonKeymasterHi ๐
For Ultra, we used Lato and for Puro we used Helvetica Neue. If you need any further help, please, let me know ๐
- AuthorPosts
You must be logged in to reply to this topic.