[Resolved] Images A Bit Funky After Redesign

Home Forums Support [Resolved] Images A Bit Funky After Redesign

Home Forums Support Images A Bit Funky After Redesign

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1569844
    Benjamin

    Hi guys, I started using Genereatepress on all of my sites and it’s a great experience. On one, of my websites, I however have some images that were centered in the previous theme on mobile, despite being positioned on the right-hand side of the page on desktop, at first this was a bit annoying but looking at the site on mobile now, it actually made sense to avoid errors.

    I want to know can you maybe give me some CSS to display in-content images as centered on mobile? Also, the images that I want to display centered are only a specific size, namely 600×900 or in some areas 900×1200 (but those need to be updated to the smaller size). That is their upload size, they are set as 300x450px on most pages.

    Is it possible to target certain image sizes to display centered? I have some screenshots if you’d like to see what I mean, otherwise, you can just visit the site on a mobile device and look at any of the articles.

    Let me know,
    Benjamin

    #1570011
    Elvin
    Staff
    Customer Support

    Hi,

    Is it possible to target certain image sizes to display centered? I have some screenshots if you’d like to see what I mean, otherwise, you can just visit the site on a mobile device and look at any of the articles.

    If you assign certain CSS classes on the image block’s Advanced settings > CSS field, you can target those specific images for styling, i.e, “display centered”.

    Once you’ve added the classes, you can add custom CSS to style them.

    Example:

    .my-custom-css-class{
    margin-left: auto;
    margin-right: auto;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1570057
    Benjamin

    Hi thanks, I’ve done some research and understand the image class. I don’t understand the CSS though, is what you’ve given just an example or can I use that code? It doesn’t seem to do anything. I assigned the custom CSS class as “centermobile”, so should the code look like this-

    .centermobile{
    margin-left: auto;
    margin-right: auto;
    }

    I don’t really know CSS that well. But I’m assuming that code isn’t going to do anything. I just want the custom CSS class to display the images as centered on mobile and as the normal alignment on desktop and tablet if you can maybe drop me that code, please?

    #1570068
    Elvin
    Staff
    Customer Support

    We can use @media for different screens.

    @media query is CSS’s way of styling screens depending on their view-width.

    Assuming you’ve added the CSS class “centermobile” to your image block, you can try this:

    @media(max-width:768px){
    .centermobile{
    margin-left: auto;
    margin-right: auto;
    }
    }

    @media(max-width:768px) is normally used with mobile screens.

    Here’s how to add CSS – https://docs.generatepress.com/article/adding-css/

    A wise man once said:
    "Have you cleared your cache?"

    #1570075
    Benjamin

    Hi Elvin, thanks for the swift reply.
    I’ve added the CSS in the WordPress customizer and applied the CSS class to one of the images by going into the image > advanced > Additional CSS class(es).

    It doesn’t seem to do anything though when I look at it on mobile. Is that code supposed to make the image center allign on mobile?

    Thanks,
    Benjamin

    #1570079
    Elvin
    Staff
    Customer Support

    It doesn’t seem to do anything though when I look at it on mobile. Is that code supposed to make the image center allign on mobile?

    Yes that is its supposed purpose.

    Can you specify which page and image you’re working on? I’ve checked the link you’ve provided and I don’t see any image block that has a centermobile CSS class or the CSS custom anywhere within the page source.

    A wise man once said:
    "Have you cleared your cache?"

    #1570098
    Benjamin

    Hi Elvin, sorry for the confusion, I was talking about my post pages. I will leave a link to the article where I’ve added the centermobile css class for testing purposes. It is supposed to be the first image after the featured image.

    #1570101
    Benjamin

    Maybe I should try adding the CSS via the simple CSS plugin?

    #1570118
    Elvin
    Staff
    Customer Support

    Maybe I should try adding the CSS via the simple CSS plugin?

    You don’t have to. It’s not necessary. 🙂

    To clarify: Are you trying to achieve something like this?
    [Redacted as requested by the topic starter]

    If so,

    Try adding this CSS:

    /* Remove image float and align center on mobile */
    @media(max-width:768px){
    .centermobile .alignright, .centermobile alignleft {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1570128
    Benjamin

    Hi yes, that’s perfect! Thanks.
    I just want to know can I remove the “/* Remove image float and align center on mobile */” part of the code. I tested and it looks like it’s working. Just want to confirm with you.

    Also, will this code stay working if my theme gets updated?

    Thanks,
    Benjamin

    #1570144
    Elvin
    Staff
    Customer Support

    Hi yes, that’s perfect! Thanks.
    I just want to know can I remove the “/* Remove image float and align center on mobile */” part of the code. I tested and it looks like it’s working. Just want to confirm with you.

    Yes you can remove it if you want. It’s just a marker/comment to indicate its purpose. 🙂

    Also, will this code stay working if my theme gets updated?

    No, theme updates don’t affect what’s inside the Additional CSS field.

    A wise man once said:
    "Have you cleared your cache?"

    #1570148
    Benjamin

    Alright, thanks for your help, Elvin. Really appreciate it. I am going to mark this ticket as resolved then.

    PS. would you mind removing the screenshot :P.

    Take care,
    Benjamin

    #1570153
    Elvin
    Staff
    Customer Support

    PS. would you mind removing the screenshot :P.

    Done. 🙂

    Alright, thanks for your help, Elvin. Really appreciate it. I am going to mark this ticket as resolved then.

    Glad to be of any help. No problem. 😀

    A wise man once said:
    "Have you cleared your cache?"

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.