Blog post content width

Support
#1

Hello. My client has a lot of smaller images so I successfully reset the image to a max width of 600 px on the posts but the content is still 100% and if I make that smaller I can not get the content area to be centered (not the actual content - just the space). How would I be able to do that?

I would like to set it to a percentage so it works on mobile. And I would like both items centered. Right now on mobile the image floats a bit right. Thank you. The css is pulled from elsewhere here and is shown below as well.

http://www.lingerieshoppe.net/ pass code quick
page
http://www.lingerieshoppe.net/pretty-in-pink/

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

/This sets the maximum size and centers all POST Featured Images/

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

/This sets the maximum size and centers all PAGE Featured Images/

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

.entry-wrap {
display: block;
padding: 60px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0.0em 0.0em 0 rgba(0,0,0,0.0);
}

#2

Hello @GeorgiaG,

Thanks for asking. :slight_smile:

Can you please confirm the passcode as shared password is working and I am getting From www.lingerieshoppe.net Incorrect Password message?

Thanks.

#3

It is quick I just entered it again to be sure.

Also, I checked mobile and I would not want the content on mobile to be any smaller so this is just for a desktop view. Thank you…

#4

Hello @GeorgiaG,

Thanks for updating.

I am really sorry, actually by mistake I was trying quickpage as password combination. I am really sorry for to confusion on my part.

Please add following CSS under Pro > Theme Options > CSS:

@media only screen and (min-width: 900px) {
   .entry-wrap {
    width: 75%;
    margin: 0 auto;
   
}

}

@media only screen and (max-width: 600px) {
   .single .entry-featured {
    width: 330px;
    float: none;
    margin: 0;
}

.entry-wrap {
    padding-top: 20px;
}

}

Thanks.

#5

Thank you. It works well except for the centering of the image. I may need to adjust the width? I am including a screengrab

Also, I would like the background image to show in the post pages as well but everything I have tried does not cover. This is how it shows for the rest of the site. It seemed to work sitewide prior to the last update but perhaps I was not paying attention and this is not a new developement. If I need to start a new ticket I am happy to do that. Thank you.

.site .page {
background-image: url(’/wp-content/uploads/2018/02/bg_swirls_1200.gif’);
/* background-repeat: repeat-y; */
background-position: 50% 0;
background-size: contain;
transition: 0s linear;
transition-property: background-position;
}

#6

Hello @GeorgiaG,

Thanks for updating thread.

Please replace second piece of code I gave you with following:

@media only screen and (max-width: 600px) {
   .single .entry-featured {
    width: 330px !important;
    float: none !important;
    margin: 0 !important;
}

Please add following CSS under Pro > Theme Options > CSS to add background image:

.single-post div#x-site {
background-image: url(/wp-content/uploads/2018/02/bg_swirls_1200.gif);
background-position: 50% 0;
background-size: contain;
transition: 0s linear;
transition-property: background-position;

}

Let us know how it goes.

Thanks.

#7

Perfection on both counts. Thank you!

#8

Glad to hear that. :slight_smile:

#9

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