Hello @heatherbodlak,
Thank you for reaching out,
You can configure the layout settings for the blog,
and then use different design options to display your archive posts.
Screenshot: https://ibb.co/LdDwnGyX
Please read this article — we’ve explained each section separately: https://docs.oceanwp.org/article/902-customizer-blog
To set your desired custom CSS, you can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/
I hope it helps,
Best Regards
Thread Starter
hbee
(@heatherbodlak)
Thank you. Yes, see, I won’t be using the default archive page since I am displaying the blog entries using different categories (elementor).
I will see if I can achieve formatting for the featured image in the content with css.
Thread Starter
hbee
(@heatherbodlak)
FYI this is the CSS I have used:
.single .entry-content {
margin-bottom: 20px;
margin-left: 50%;
}
.single .thumbnail img {
width: 45%;
margin-top: -350px;
}
@media (max-width: 767px) {
.single .entry-content {
margin-bottom: 20px;
margin-left: 10px;
}
.single .thumbnail img {
width: 100%;
margin-top: 0px;
}
}
———-
This is not ideal though… because it the top negative margin depends on the amount of text in the content… so it won’t appear in that fixed position 🙁
Any idea how I could have it be placed in a fixed position?
-
This reply was modified 1 year, 2 months ago by
hbee.
Hello @heatherbodlak,
Thank you for the update,
This style is only for the archive page. We do not have such a style for single post pages. Since you are modifying the content, if you still want to use CSS, the method you followed is incorrect. You should either use display: inline or flex, for example, the following CSS, you can edit these and write for responsive:
.single .thumbnail,
.single .entry-content {
display: inline-block;
width: 50%;
}
.single .thumbnail {
float: left;
padding-right: 10px;
}
.single .entry-content {
float: right;
}
.single .entry-share {
display: block;
clear: both;
}
https://ibb.co/XfZRZ5xL
Please recheck the issue and keep us posted.
Hope it helps,
Best Regards
