Alignment of Images in Sidebar

  • Resolved lospeso

    (@lospeso)


    3 years, 12 months ago

    When inserting an image that is not the full width of the sidebar, the image is automatically aligned to the left, which is a standard default.

    No WordPress Image Alignment Buttons
    The Image Widget does not provide any of the WordPress alignment buttons like we see in the regular content editor, to get the image to align center or align right or none or left. Without the WordPress alignment buttons, I have to assign a class name to the image then go to Custom CSS.

    Custom CSS Does Not Work on Image Widget
    The Custom CSS does not work at all when using the assigned class name to the image, including using the property value “!important”.

    One way I test Custom CSS on modifying elements in a theme is use either a color dashed border or using “Display: none”. I tried “Display: none” with my assigned class name to the Image Widget and that did Not work. This means the Custom CSS is not affecting the widget at all.

    Theme Class/ID names tired
    I even tried the class or id names, assigned to the sidebar Image Widget by the Theme, and that still does not work in Custom CSS on an Image Widget. They work on other widgets like the Custom HTML widget, but not the Image Widget.

    Custom Class Name Works In Browser Inspector
    When I use the browser inspector for that page and Image Widget element, I insert into the inspector my assigned image class name and the CSS properties, that works, but it does not work from the Custom CSS area.

    How can I apply Custom CSS to an Image Widget?
    I do not know if this is a theme bug or if this is a bug in WordPress core.
    Essentially, with all the above tests, what can I do to use Custom CSS on my assigned class name to the Image Widget?

    • This topic was modified 3 years, 12 months ago by lospeso.
Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi @lospeso

    Could you provide your site URL and also a screenshot of the widget you’re mentioning so that we can assist you with this query better?

    Regards,
    ThemeGrill

    Thread Starter lospeso

    (@lospeso)

    The URL is private, so cannot publish it here in his public forum. If you have an email or comment form I can use to send the link to you, that is fine.

    Here is the screenshot:

    https://prnt.sc/vuqlcr

    If the image fills the width of the sidebar, then alignment is not really needed, unless the images gets much smaller in mobile screens, then alignment to center is best.

    On Desktop screens, I cannot align the smaller width images (see marked image with black text in screenshot).

    Thread Starter lospeso

    (@lospeso)

    Ok, this is really weird and I have never experienced this before.

    I went back and tried it again, because a couple years back, with another theme, trying the Custom CSS again, for some reason, started to work.

    Previously I entered and saved the following Custom CSS to the custom class name assigned to the image:

    /*WIDGET AREA*/
.sidebarImg {
display: none !important;
}

    As per my initial post here, nothing worked, not even that CSS property and value worked.

    Today, I just went back into the Custom CSS, right after my post to you above with a screenshot and I entered the following Custom CSS right below the entry of “Display: none”, with the intent of deleting the same entry just above it. I did this:

    /*WIDGET AREA*/
.sidebarImg {
display: none !important;
}
.sidebarImg {
display: block;
margin: 0 auto;
}

    Suddenly, the image aligned center. It worked.
    As I understand how CSS works, the duplicate entry right after is the one that the Browser takes, instead of the first one.

    I tested this further. I removed the 1st duplicate entry entirely, leaving only the “display: block” entry, and the alignment did not work as before.

    I replaced the duplicate entry, but this time I entered it as a empty class like so:

    /*WIDGET AREA*/
.sidebarImg {
}
.sidebarImg {
display: block;
margin: 0 auto;
}

    This allowed the Custom CSS for the image to work.

    To me this is really weird and have no idea why it works this way specifically for the image in a widget, but that is what I am getting after several tests. Even with the cache cleared.

    This was found by fluke, and it is not a standard method of writing CSS for sure.

    Plugins deactivated – I deactivated all plugins, since none apply in this case and the issue remained the same, and the weird Custom CSS method still worked the same way.

    Does this help pin-point the cause of the issue?

    Hi @lospeso

    It seems that the !important part in the CSS code had caused the later CSS to not work for the site and removing it allowed the Custom CSS to work.

    Hope this helps! Do let me know if you have any further queries!

    Regards,
    ThemeGrill

    Thread Starter lospeso

    (@lospeso)

    Thanks for the reply.

    No, specifically, it was not the “!important” value that caused it, but you were close. The issue was caused by another syntax error further up the Custom CSS chain. A closing bracket ” } ” was in the wrong place for one of the CSS declaration blocks. When I corrected it, the CSS works.

    Sorry ??

    It was all my bad.

    Thanks for your patience and help.

    Hi @lospeso,

    Glad to help you. If you do have any further queries regarding our theme please do let us know.

    Kind Regards,
    ThemeGrill Support.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Alignment of Images in Sidebar’ is closed to new replies.