• andyandy

    (@androidandreas)


    How can I make the images in Part 3 of my site look like those in Part 1?

    Someone on another thread kindly posted some CSS which created the effect on Part 1. Why does pasting this as Additional CSS not apply across all pages of my site?

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    I recommend asking at https://wordpress.org/support/theme/expound#new-post so the plugin’s / theme’s developers and support community can help you with this. However, also note that your theme hasn’t been updated in nearly 10 years. It might be time to find another.

    Part 1 and Part 3 are using different blocks. You have used Gallery on Part 3, which has a different structure, therefore, the same CSS selector won’t work.

    .gallery-item img {
        width: 100% !important;
        height: auto !important;
        border-radius: 0 !important;
        object-fit: unset !important;
    }

    You can use the above CSS to make the images full width, but make sure to edit the gallery and use medium image size (at least) for better results.

    You can also edit the existing CSS, and add .gallery-item img (recommended):

    figure img {    width: 100% !important;    height: auto !important;    border-radius: 0 !important;    object-fit: unset !important;}

    Becomes:

    figure img, .gallery-item img {    width: 100% !important;    height: auto !important;    border-radius: 0 !important;    object-fit: unset !important;}
    Thread Starter andyandy

    (@androidandreas)

    Ok, thankyou. is editing CSS the same as adding CSS and if not how do I do this?

    @androidandreas your existing CSS should be under WP Dashboard ➜ Appearance ➜ Custom CSS, and you just have to replace the following:

    figcaption.wp-element-caption {
        font-size: 16px !important;
        color: 	#1E90FF !important;
    }
    
    figure img {    width: 100% !important;    height: auto !important;    border-radius: 0 !important;    object-fit: unset !important;}

    With:

    figcaption.wp-element-caption {
        font-size: 16px !important;
        color: #1E90FF !important;
    }
    
    figure img, .gallery-item img {
        width: 100% !important;
        height: auto !important;
        border-radius: 0 !important;
        object-fit: unset !important;
    }

    Save changes once you have replaced the CSS.

    Thread Starter andyandy

    (@androidandreas)

    Thanks but I am confused.

    I see an option fro Additional CSS under Dashboard>Appearance but not “Custom CSS”. Thus I can add but not edit, it seems…

    @androidandreas yeah, it is supposed to say “Additional CSS”, my bad.

    Thread Starter andyandy

    (@androidandreas)

    OK, thankyou.

    I have added the code you kindly supplied as Additional CSS..

    If you check Part 3 of my blog it has certainly enlarged the images. But had not had the same effect as in Part 1.

    Is this how it is supposed to look? Or do I still need to edit the image sizes?

    You need to edit the gallery block to use 3 columns, and try using medium image size first, if that doesn’t work, then use large and so on.

    Thread Starter andyandy

    (@androidandreas)

    Ok, got it. Medium did it. I am left with different sized images. Do I need to recreate the gallery from scratch or is editing images within the media Library suffoicient?

    That’s because your images have different dimensions. You can edit and make them all equal or close to equal. Or if you don’t want to do that, add this CSS:

    #gallery-8 img {
        aspect-ratio: 4/3;
    }

    The downside is that the images will be a little stretched and the last one (which has more height), will be squished:

    Another variant could be:

    #gallery-8 img {
        aspect-ratio: 4/3;
        object-fit: contain !important;
    }

    And now the images will be adjusted to fit within the defined aspect ratio, and have empty spaces around it:

    Thread Starter andyandy

    (@androidandreas)

    Thanks. Went for first option,. For some reason it is smaller than the others on my screen – any idea why?

    Thread Starter andyandy

    (@androidandreas)

    Update – all images now same size.

    Just need to remove the green buttons that have appeared next to all images…

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Changing appearance of images using CSS’ is closed to new replies.