Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 19, 2018 at 5:12 pm #929160
    goldengate415

    Hi!

    I added some images to the sidebar and they look great on pages that were not built using Avia Layout Builder. However, on mobile, or on pages built with ALB, the images are not centered.

    Here’s an example of a page where the images with town names (e.g. Kentfield homes for sale) is centered:

    and here’s a page where it is not centered (page built with ALB):

    Images were dropped on sidebar using the image widget.

    Login credentials to staging site below… please track any changes so I can make them on production site manually.

    Thanks!!!
    Rob

    March 20, 2018 at 7:17 am #929548
    Victoria

    Hey Rob,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .widget_media_image a img {
    display: block;
    margin: 0 auto;
  }
}

    But the texts are not centered either.

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 20, 2018 at 7:46 am #929567
    goldengate415

    Hi Victoria!

    Thanks for your help. Unfortunately that code did not change anything. And I’m not a css coder but it looks like that code just is trying to address the mobile view. Perhaps my original post wasn’t clear.

    – On all pages in mobile, the images (and text, you are correct) is not centered. – problem
    – On pages created in standard editor (e.g. Kentfield Homes for sale), the sidebar images and text are nicely centered – perfect
    – On pages created in ALB, sidebar images and text are not centered on mobile OR desktop.

    So need to fix – all pages on mobile and ALB pages on desktop.

    Does that make sense?

    Thank you!!!!!!!

    Best
    Rob

    PS Feel free to log into staging site and see if you can implement the fixes / play around there… you can’t hurt anything in staging. :)

    March 20, 2018 at 11:56 pm #930189
    goldengate415

    Victoria / mods, is it possible that this solution in my thread from 2 years ago somehow caused this?

    Hoping you can log into my staging site and figure out how to fix it.
    Thanks

    March 20, 2018 at 11:57 pm #930190
    goldengate415

    Post two years ago may be related?

    https://kriesi.at/support/topic/add-background-color-to-sidebar-and-center-content-within-sidebar/

    • This reply was modified 6 years, 8 months ago by goldengate415.
    March 21, 2018 at 12:00 am #930192
    goldengate415

    I am now seeing that the links I pasted using the “link” command on here didn’t actually paste in my original post.

    Sidebar on page created with standard wordpress editor working well on desktop (centered text and images) but looks bad on mobile:
    http://www.thomashenthorne.com/kentfield/

    Sidebar created using ALB looks bad on desktop and mobile, not centered:
    http://www.thomashenthorne.com/belvedere-homes-for-sale/

    Sorry, will paste links from now on just by pasting them instead of using “link” in the post box toolbar. Now I understand why you were confused!

    Thanks
    Rob

    March 21, 2018 at 9:33 am #930448
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-height: 767px) {

#top #main .sidebar .widget {
	float: none;
	text-align: center;
}}

    Best regards,
    Vinay

    March 21, 2018 at 4:29 pm #930654
    goldengate415

    Hey Vinay! Thank you… In my style.css I see this scary message:

    “There are 3 errors which must be fixed before you can update this file.” with a message about the site breaking if I ignore this and update anyway.

    Can you use the login credentials provided please and check on that file too? I tried adding it to quick css but as you probably already know, it doesn’t seem to help when placed there.

    Thanks!!!
    Rob

    • This reply was modified 6 years, 8 months ago by goldengate415.
    March 22, 2018 at 12:27 am #930965
    Yigit

    Hey Rob,

    I edited your column element and gave it custom CSS class “alb-sidebar” and then added following code to bottom Style.css of your child theme

    .alb-sidebar .widgettitle, .alb-sidebar .widget_media_image a {
    text-align: center;
	display: block;
}

    Please review your website :)

    Regards,
    Yigit

    March 22, 2018 at 12:38 am #930968
    goldengate415

    Perfect, thanks, please close thread!!!!

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Images on Sidebar Not Centered in Mobile or in ALB’ is closed to new replies.