-
0754ben84
Hi Guys, I’ve got website – a custom build. However, to keep build costs down we’ve built the blog in GP.
Naturally, we want to keep the look of the blog as close to the main site as possible. But I’m struggling to get the container width to match, especially across all devices.
This is the main site: https://dirtybertie.co.uk/
And this is the blog: https://dirtybertie.co.uk/blog/Can you help?
Many thanks!
-
Hi there,
tricky one.
The custom build is using a max-width of 1600px with inline padding set to REMs.
The padding varies between 0, 1.25rem and 5rem at higher breakpoint.
The REM unit value is also variable due to this CSS:html { font-size: min(1vw,16px); }
So its complicated and replicating it in GP is not going to be 100% accurate.
For the basic containment width try:1. set the themes Container Width to 1600px.
2. add this CSS to set the REM size and padding to match the homepage.
html { font-size: min(1vw,16px); } .grid-container { padding-inline: 1.25rem !important; } @media print,screen and (min-width:64.0625em) { .grid-container { padding-inline: 5rem !important; } }
It should get you something close.
-
0754ben84
Hi David,
Thanks for this. So the container has worked pretty well.
However, the body font has gone small on tablet and tiny on mobile. Here’s an image to show you what’ going on: https://imgur.com/a/Kn7JqR2
Any ideas?
Thanks again!
-
Ah theres a bunch of media breaks for the root rem size and one additional rule for serving the
p
size.
Update the CSS to this:html { font-size: min(1vw,16px); } .grid-container { padding-inline: 1.25rem !important; } p { font-size: 1.15rem } @media print, screen and (max-width: 75.06125em) { html { font-size:min(1.2vw, 21.3333333333px) } } @media print, screen and (max-width: 64.06125em) { html { font-size:min(1.5vw, 21.3333333333px) } } @media screen and (max-width: 800px) { html { font-size:min(2vw, 21.3333333333px) } } @media print, screen and (max-width: 40.06125em) { html { font-size:min(4.2vw, 21.3333333333px) } }
-
0754ben84
Hi David,
I’m sorry to b a pain on this.
When I ass the updated CSS, it removes all the container padding. Here’s a video to show you what happens:
https://www.loom.com/share/3c0f9c534e5d4e5aa67e9f5c9c79e436?sid=f4a47af3-5f56-40f0-8ca1-04b448cb172d
Thanks
Ben 🙂
- You must be logged in to reply to this topic.