-
Posts
-
Hello Team,
After adding a sidebar to my blog pages, I noticed some problems:– when using a 90% zoom or less (notebook using Chrome): there is a large white space between content (not centered) and sidebar and the social icons are truncated in the bottom;
– when using a 100% zoom (notebook using Chrome): the white space is narrower, the social icons are not truncated but the last icon (google plus) disappears.
See example in the private contentWhat’s wrong?
Thanks a lot for any suggestion.Hey turistai,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#top .entry-content { max-width: 100% !important; }Best regards,
VinayHello Vinay,
Thanks for the code. It is almost ok now.
The only problem is that the featured image changes width respect to the text when zooming.
I mean it is not aligned to the text.
You may verify the issue testing the link below in the private space.
Thanks again!Hi,
Sorry for the delay, in the example link the featured image lines up correctly with the text below it.. please check the screenshot attached. if this is not what you see on your end please try to hard refresh and clear the browser cache.
Best regards,
VinayHi Vinay,
thanks for your reply.When you checked, the featured image was centered with the text below because I removed the code you sent:
#top .entry-content {
max-width: 100% !important;
}Sorry but I was waiting for your answer. No problem anyway.
I put your css code again and image is not centered anymore. You can check again.I would like to have text (800 px) and featured image (800 px) centered and aligned when zooming.
please check also the attached file (zoom 90% in Chrome) and the css code (a part of it) I am using.
Maybe there is some kind of conflict.
Thanks a lot.Hi,
OK! Gotcha now… please check attached screenshot. To achieve the same look Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#top .post-entry { max-width: 800px !important; left:50%; transform:translate(-50%); }Best regards,
VinayHi Rikard and Vinay,
Unfortunately the code Vinay sent me#top .post-entry {
max-width: 800px !important;
left:50%;
transform:translate(-50%);
}works fine at post level. It is ok. It is what I need.
But it broke the site format everywhere else (homepage, category page…).
I sent you a couple of days ago privately the screenshots of the broken pages but maybe you didn’t see it.
I will sent them again.
Thanks again.
p.s. I removed the code to allow my site to work well. If you need to test it please let me know and I will put it again at Quick CSS.Hi,
To make changes to only single post pages Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#top.single-post .post-entry { max-width: 800px !important; left:50%; transform:translate(-50%); }Best regards,
Vinay
- You must be logged in to reply to this topic.