How do I reduce the margins on Posts for only the main body of text, while leaving images alone? I want to emulate the readability of Medium blog posts: see example below.
https://medium.com/message/lets-talk-about-margins-14646574c385
Notice how large the left and right margins are for the text, but images are unaffected. This allows for the text itself to be nice and large, and thus very readable on all resolutions.
——
I also noticed that when the width of the browser is reduced to about ~700-800 pixels on that Medium example, the font also reduces in size by just a smidge. Because I’ll be reducing the margins for the main body text of posts, I want to also increase the size of the font to make it more readable. But if I change it to a static size, say 18, I still want it to be responsive and reduce in size. If I successfully adjust the text margins mentioned above and increase size of body text, will I need to add a custom @media CSS code to make sure the font size is still responsively reduced or will it happen still? Because right now it doesn’t do that on a demo post on my website, so I doubt it will when I adjust the margins.
http://wuche.gg/2017/03/31/top-tip-how-to-find-your-signature-scent-this-spring-3/
What would be the proper code to make sure my font is responsive? I’m guessing it has to do with @media and font-size.
Thanks for your help in advance!
Hi,
Well you could limit the paragraphs only inside the post content, while not affecting the images with something like this – https://www.screencast.com/t/GPOuxgvwUd1 but as you can see the smaller images inside the post remain in their initial position, and there is no way to differentiate them from the other ones for further alignment. Maybe you will have to position them differently inside the post content until you have a proper result or use only full images.
Please note that a code like this might be needed to be modified if you have more elements inside the post content then paragraphs.
I have inspected the site you mention, and I can see that the font is changing beyond a specific width like this
– https://www.screencast.com/t/3xtgjFaiY9v
You can create a condition like that also – https://www.screencast.com/t/3xtgjFaiY9v using a media query, or create a normal code for this and use the theme’s Advanced Css sections in Theme panel
– https://www.screencast.com/t/JFonig4y where there already are sections for specific screen sizes. Then the font will change size according to the screen width.
Thanks
Perfect! Thanks a bunch.
Update: it worked perfectly, except when I tried to add an extra margin rule for mobile devices only.
Under the Advanced CSS tab, I applied the following code to every section exception Mobile:
.td-post-content p{
width: 69%;
margin-left: auto;
margin-right: auto;
}
And then under Mobile I increased width, with the code below:
.td-post-content p{
width: 90%;
margin-left: auto;
margin-right: auto;
}
Yet when I reduce my resolution to mobile, the content still seems to be at 69% instead of the desired 90%. Any ideas on how to get this working?
Okay nevermind, it started working for some reason after the Advanced CSS randomly disappeared and I reapplied it.
