I’ve noticed that in smartphone, the newsmag theme the dafault posts have a thinner margin than the newspaper ones. So, more screen width is used. Can I have the same margin in Newspaper? Which modifications do I have to do?
Also I want to know if it is possible to change the distance between the sharing icons and the image. Thanks. 🙂
DAFULT POST NEWSPAPER:
https://demo.tagdiv.com/newspaper/wordpress-news-magazine-charts-the-most-fashionable-new-york-couples-in-2016/
DEFAULT POST NEWSMAG:
https://demo.tagdiv.com/newsmag/discover-the-10-best-hairstyles-according-to-your-face-shape/
Thanks,
Hi,
Indeed, the Newsmag theme has a 10px padding on mobile, the Newspaper has 20px. Between the themes there are similarities but there are also differences, these are 2 different themes after all.
I could give you a code to reduce the padding to the same as Newsmag, you can make tests with it and see if there are no layout problems caused by it (it will apply on posts only)
– https://www.screencast.com/t/sZ0g1dli
@media (max-width: 767px) {
.single .td-container, .tdc-row {
padding-left: 10px;
padding-right: 10px;
}}
Thanks
I had two questions. I think you miss the second one. 🙂
“Also I want to know if it is possible to change the distance between the sharing icons and the image”.
Thanks!
Indeed, seems I missed the second question, sorry about that. On mobile there is a bottom margin of 20px set, while on desktop it is 30px
– https://www.screencast.com/t/7BuOruPp
You could remove it or reduce it it with a code like this on mobile
– https://www.screencast.com/t/OS6nXGem0sMN
@media (max-width: 767px) {
.td-post-sharing-top {
margin-bottom: 0px;
}}
Thanks a lot. It works perfectly.
To make changes on desktop it’s the same code but changing the first line?
@media (max-width: 1018px) and (min-width: 768px) {
I’m trying to figure how it works the theme using the chrome tool to see the source code but it’s my first time in wordpress, css, php and is hard to me.
Can you tell me the codes to:
1. Modify the distance between breadcrumbs and the title of the article.
2. Modify the distance between the title of the article and the “author + date”.
3. The distance between “author + date” and the social sharing icons.
4. The distance between the main post image and the begining of the body text.
Thanks,
Hi,
You can use media queries such as those, there is also an Advanced CSS section in the theme panel where there is no need for them. They will be added automatically, you can enter code normally in them and it will apply for those specific widths
– https://www.screencast.com/t/KHe2bnNMHsgg
There is a guide about the browser inspector tool you could read
– https://forum.tagdiv.com/create-custom-code-using-the-browsers-inspector/
This tool is very useful to make various modifications around the website when there are no specific settings for them.
For example the breadcrumbs have a margin between them and the post categories
– https://www.screencast.com/t/dRGUU9ySgR
That could be remove like this
– https://www.screencast.com/t/PPm7mA7nsS
The inspector is a very powerful tool that can be used in this matter.
Thanks
