Border around post images? | PenciDesign Support

5against4 replied

5 years ago

Customer Reply

Perfect!! How silly that i made the mistake. Thank you so much :) :)

PenciDesign replied

5 years ago

Staff Reply

Hi,

As I checked, this issue caused by your custom CSS code is missing a close } for a CSS above it.

Here is that code:

@media only screen and (min-width: 1170px) {
    .penci-sidebar-content {
        width: 23%;
    }
    .penci-single-style-10 .penci-single-s10-content,
    .container.penci_sidebar #main {
        width: 77%;
    }
/* gap between slider and body */

It should be:

@media only screen and (min-width: 1170px) {
    .penci-sidebar-content {
        width: 23%;
    }
    .penci-single-style-10 .penci-single-s10-content,
    .container.penci_sidebar #main {
        width: 77%;
    }
}
/* gap between slider and body */

Let's change it and check it again.

Best Regards,

PenciDesign

5against4 replied

5 years ago

Customer Reply

Thanks! That worked for the PADDING, but the BORDER is still missing. i'm currently using this:

.post-entry img{ border: 1px solid #a6a6a6; padding: 5px; }

Does this need to be changed?

PenciDesign replied

5 years ago

Staff Reply

Hi,

Ahh, I thought you've asked for images on the sidebar. If you mean about the images inside posts. Please change the code I sent before:

@media only screen and (min-width: 480px){
.post-entry img[align="left"] {
    margin-right: 20px;
    margin-bottom: 20px;
}
.post-entry img[align="right"] {
    margin-left: 20px;
    margin-bottom: 20px;
}
}

To this code:

.post-entry img[align="left"] {
    margin-right: 20px;
    margin-bottom: 20px;
}
.post-entry img[align="right"] {
    margin-left: 20px;
    margin-bottom: 20px;
}

Best Regards,

PenciDesign

5against4 replied

5 years ago

Customer Reply

That doesn't seem to be true. See the attached images - when the width is reduced the padding and border seem to vanish.

PenciDesign replied

5 years ago

Staff Reply

Hi,

No - it will work for all screens.

Best Regards,

PenciDesign

5against4 replied

5 years ago

Customer Reply

A follow-up question: this border doesn't seem to be working when the site is viewed on mobile platforms. Do i need to alter the code to work on mobile as well?

5against4 replied

5 years ago

Customer Reply

Great, great! Many thanks again for the excellent support!! :) :)

PenciDesign replied

5 years ago

Staff Reply

Hi,

To do that, please add more this code to Customize > Custom CSS:

.penci-sidebar-content img{ border: 1px solid #dedede; padding: 6px; }

Note: To make the borders showing, you need to remove the inline-CSS border: none here because it will override the CSS code I sent.

Best Regards,

PenciDesign

5against4 replied

5 years ago

Customer Reply

Afterthought: if i also wanted to add a border/padding to images in the sidebar, what code should i use for that?

5against4 replied

5 years ago

Customer Reply

Excellent! Thanks so much! :)

PenciDesign replied

5 years ago

Staff Reply

Hi,

Please try add more this code to Customize > Custom CSS to do that:

@media only screen and (min-width: 480px){
.post-entry img[align="left"] {
    margin-right: 20px;
    margin-bottom: 20px;
}
.post-entry img[align="right"] {
    margin-left: 20px;
    margin-bottom: 20px;
}
}

Best Regards,

PenciDesign

5against4 replied

5 years ago

Customer Reply

Ooh, a quick follow-up question: how can i add padding on the OUTSIDE of the border round the image? i don't want the text to get too close to the borders!

See here for examples of text close to the borders:

http://5against4.com/2020/09/30/estonian-music-days-2020-part-2/

5against4 replied

5 years ago

Customer Reply

Great - thanks again for the first-class support! :)

PenciDesign replied

5 years ago

Staff Reply

Hi,

YesThe CSS will apply for all images inside your posts. And if you want to remove it for specific images, you need to add the inline-css as you said.

Best Regards,

PenciDesign

5against4 replied

5 years ago

Customer Reply

i just tested

style="border: none;"

and it works fine. i assume this is the best way to do this when occasionally i don't want a border?

5against4 replied

5 years ago

Customer Reply

That's great, thanks!

If i want an individual image to NOT have a border, what code should i use to remove it? i usually insert images into posts/pages using HTML code.

Would this work?

style="border: none;"

PenciDesign replied

5 years ago

Staff Reply

Hi,

Please try add more this code to Customize > Custom CSS to do that:

.post-entry img{ border: 1px solid #dedede; padding: 6px; }

Change color code dedede to any color code for border color as you want. And change value 6 to padding value between the borders & image inside it.

Best Regards,

PenciDesign

5against4 started the conversation

5 years ago

Conversation Start

Hi, i was wondering if it's possible to add a border around images in posts? i wouldn't want the border on other images (header, sidebar, etc.) but just if they're used in posts or pages. Is that possible?