Make the blog posts look nicer

Support
#1

Hi!

I have the website https://calamiaresort.com/ and would like to make the blog posts look nicer.

for example, this one: https://calamiaresort.com/essential-scuba-diving-techniques-you-should-know/

I have checked all the settings in the X Theme Blog options, but there are some other things I want to do.
I dont want the blog to be fullwidth, now the text is stretched across the screen and is a bit hard to read. I want the width to be 60% of of its current width. Can I target that with CSS? To change to width of all the blog posts text to 60% width on a desktop?

Regarding the font size: I want the font to be 17,5 px in size. But I dont want to affect the rest of the website. How do I target only the text size in the blog posts with CSS?

Thank you!

Kind regards
Maria

#2

Hello Maria,

Thanks for writing in!

To resolve your issue, please do the following:

1.) Go to X > Theme Options > Header > Navbar and change the Navbar Top Height from 135 to 195 pixels.

2.) And then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.single-post .x-container.max.width.offset {
    margin-top: 0;
}

.single-post .x-main.full .entry-wrap {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    border: none;
    box-shadow: none;
}

By the way, please also make sure that you are up to date. Our latest versions are:

  • X theme 7.1.2
  • Cornerstone 4.1.2

This latest release contains fixes for several issues so be sure to check out the changelog (http://theme.co/changelog/).

After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

#3

Thank you!

The page width works great! But I want to change the font size (paragraph) on the blog posts pages to 17.5px, how do I target that with CSS?
Thank you for a great support!

Kind regards
Maria

#4

Hi Maria,

Please keep in mind that px unit is not responsive, but it looks 17.5px is just enough size for mobile. You can add this to Theme Options > CSS as well to resize your posts font-size without affecting the pages.

.single-post .entry-content {
	font-size: 17.5px;
}

Hope it helps,
Cheers!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.