How to align the post title, featured image, and text of a blog post

Support
#3

Hi, thanks for the tip, this didn’t really work. The text is still narrower than the width of the featured image, and the featured image is no longer responsive in the correct way, as the image gets cut off on the right side.
Here’s a video of the behavior. https://drive.google.com/file/d/1-mCAuQB7coLvfFLJ-HnDiJ17M8sXALix/view?usp=sharing

The image not being responsive/getting cut off is solved with something like the code below

.blog .entry-featured {
position: relative;
padding: 5;
width: 550px;
float: none;
margin: 20px auto;
}

However, as I widen the window, the featured image is stuck at 550px. I just want the text and the photo to have the same max width.

Thanks in advance for your help.

#4

Hi again,

The featured image is not responsive because you’ve given it a fixed width of 550px in the above code you shared. Please remove your code and use this one:

.single-post .entry-featured {
    width: 100% !important;
}
.single-post .entry-content {
    padding: 0 !important;
    width: 100%;
}

.single-post .entry-title {
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
}

I tested the code in my local setup and featured image remains responsive with this code.

Let us know how this goes!

#5

It doesn’t work… it still cuts off on the right side.
For your reference, here’s all the custom CSS that’s on my site with your code provided above at the very bottom.

.bigcover {height:200px}
.x-navbar-inner {
background: url() no-repeat;
background-size: 500px 500px;
background-position: bottom}
.x-text {font-size:120%}
.x-btn {
background-color: transparent;
box-shadow: none;
border: transparent; }
.headerfont {
font-family:“abel”
}

.paragraph {
font-family:“lora”
}
.myclass {
font-size: 16px;
font-family: “Lato”,sans-serif;
}

#linespace {
line-height: .6em;
}
input.wpcf7-form-control.wpcf7-submit:hover {
background-color: black;
color: yellow;
}

input.wpcf7-form-control.wpcf7-submit {
background-color: rgb(63, 171, 198);
color: fffff;
border-color: rgb(63, 171, 198);
}

.x-container.max {
max-width: 100%;
}

.blog .entry-featured {
position: relative;
padding: 5;
width: 250px;
float: none;
margin: 20px auto;
}

I restarted MAMP, chose a different browser as well to access just in case it was cached or was somehow not loading the code. Any other suggestions?

#6

Hi again,

Please remove all of your custom CSS from everywhere and just add the following code:

.single-post .entry-featured {
    width: 100% !important;
}
.single-post .entry-content {
    padding: 0 !important;
    width: 100%;
}

.single-post .entry-title {
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
}

Then if you’ve any caching plugin, make sure to purge it’s cache. I tested the above code in my local setup and it works fine.

If it still doesn’t work then please try uploading your site to a live environment so we can take a look at your current setup.

Let us know how this goes!

#7

I think I’ve found a problem. I can’t delete the CSS code. I deleted, saved, and then totally wiped cookies and data in chrome. I reopen the site, and the old CSS code is still there. I am not using any caching plug in. Any other suggestions?

#8

Hi There,

Can you confirm that you are fully updated? (X and Cornerstone)

You can find the latest version numbers here. Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Let us know how it goes,
Cheers!

#9

Hi, yes I can confirm that everything is up to date. I just uploaded my site to a live environment. How do I send you guys log in information privately so you can check it out? Again, the problem is that CSS code does not get saved. I t keeps getting reverted to previous save points.

#10

Hi There,

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

  • Link to your site
  • WordPress Admin username / password
  • FTP credentials

Thanks.

#11

Sure, here’s the login info. My problems is at editing the front page via cornerstone. I replace the CSS (line 40 or so) with the CSS code you guys have provided. I save it, back out, and go back to edit. It does not retain the save.

#12

While I have you, there is another element that I need to fix. I have a two column classic element that displays fine on desktop, but it does not appear centered on mobile. Please see screenshot here

https://drive.google.com/file/d/10O4uqctZiI5QB8B_V-9LzHTtzEq593B_/view?usp=sharing

How do I center/ align this element on mobile?

#13

Hi There,

Thank you for the credentials, your posts were not built in Cornerstone so you’re not supposed to use the Cornerstone > CSS area of that post. Switching from Cornerstone to Classic WordPress editor (or any other content builder) is a no-no.

Since you want the CSS to be applied to all Posts item you should be adding custom CSS in the X > Theme Options > CSS area.

Do you want your single posts page to look like this?


You should not be editing the other elements (title, image, text) because those are responsive to the container. So we should only be adjusting the Container. If so, please add this to X > Theme Options > CSS.

.single-post .x-container.max.width {
	max-width: 500px;
}

Regarding the second issue, that is happening because of the 100px left padding you applied on the ROW.


Please inspect that ROW and zero out the left-padding, also on that ROW turn ON the Inner Container option and turn OFF the Marginless Columns option.


Let your elements respond to the main container.

Hope that shed some lights,
Cheers!

#14

Great, that helps a bit. Understood on the posts… I still cannot change that CSS on the front page. If you go to pages> front page> edit with cornerstone, and click on CSS, there’s still this code
blog .entry-featured {
position: relative;
padding: 5;
width: 250px;
float: none;
margin: 20px auto;
}

I can’t erase it. I delete it, save, x says it’s been updated. I navigate away from it, come back , and it is still there. Can you tell me what is going on there?

#15

Hi,

I tried on other pages and saving works just fine.

There is some element in your homepage that is preventing it from working.

Try to recreate your homepage in a new page and add the elements bits by bits while checking every time.

That way you can narrow down which elements is causing the issue.

Thanks

#16

Hi, I have narrowed it down as suggested. I kept deleting sections until CSS changes were reflecting. I have found the problem section. It is titled “ask yourself”. I have recreated this section from scratch and it is still preventing me from saving CSS changes for the page. What could this be? Is it because I am using icon shortcodes? If you could take a look at why this element is causing me this trouble it would be highly appreciated.

#17

I’ve now tested by removing all icon related shortcodes, and it doesn’t make a difference. I’m at a loss at why an element can stop CSS from saving. Please help!

#18

Wow I figured it out… It was YOAST plugin. I got the hint from this support ticket from November 2017

Has this still not been fixed? Also, now that I can edit the CSS, I am trying the CSS code that you have supplied but I still cannot align my featured image and my text. Please let me know what I am doing wrong.

#19

Hi there,

I suggest that you add the CSS code to the X > Theme Options > CSS. The only change that you need to add in the code is to add .home to the beginning of the CSS code.

So in your case you will need to add the code below to X > Theme Options > CSS:

.home .bigcover {height:200px}
.home .x-navbar-inner {
background: url() no-repeat;
  background-size: 500px 500px;
  background-position: bottom}
.home .x-text {font-size:120%}
.home .x-btn {
  background-color: transparent;
  box-shadow: none;
  border: transparent; }
.home .headerfont  { 
   font-family:"abel"
}

.home .paragraph { 
   font-family:"lora"
}
.home .myclass {
	font-size: 16px;
	font-family: "Lato",sans-serif;
}

.home #linespace {
line-height: .6em;
}
.home input.wpcf7-form-control.wpcf7-submit:hover {
background-color: black;
color: yellow;
}
.home input.wpcf7-form-control.wpcf7-submit {
background-color: rgb(63, 171, 198);
color: fffff;
border-color: rgb(63, 171, 198);
}

.home .x-container.max {
  max-width: 100%;
}

That will do the same thing as you would add the CSS to the homepage. AT least then you will have more time to troubleshoot the case and see why the homepage has such an issue.

Thank you.

#20

I don’t know if you have seen my post that I posted one minute before you. Can you please reply to that one? It was Yoast plugin that was causing problems. I can edit CSS now, but I am not able to fix my original problem of aligning images and text in the post page.

#21

Hi There,

The text and featured image seem correct align on my end:

Can you send me the screenshot how it looks on your end?

Thank you.

#22

Cleared browser history, cash, used a different browser and still doing this.