ViewedCenter Related Posts Images

  • Author
    Posts
  • Sara Trezzi
    Participant

    Hello,
    Is there a way to make sure the thumbnails are centred and equally spaced in the page in both mobile and desktop version? At the moment they are all to the left of the page as you can see here:
    https://gatheringdreams.com/healthy-oatcakes-recipe/#comment-335

    Thanks!

    #5372
    iLen
    Keymaster

    Hello, please check if this topic can help πŸ‘‰
    http://support.ilentheme.com/forums/topic/how-can-i-put-the-center-posts/

    • This reply was modified 2 months, 3 weeks ago by  iLen. Reason: update text
    • This reply was modified 2 months, 3 weeks ago by  iLen. Reason: update text
    #5373
    Sara Trezzi
    Participant

    Hello,
    I tried the suggestion on that post but the custom css doesn’t seem to change anything at all.

    yuzo_related_post .yuzo_wraps{
    margin: 0 auto;
    text-align: center;
    width: 77%;
    }

    No matter what width I use.

    #5376
    Sara Trezzi
    Participant

    Also, in case you are wondering, I cleared the cache several times πŸ™‚

    #5377
    iLen
    Keymaster

    Hi, I need your website link to review and do it live

    #5378
    Sara Trezzi
    Participant

    Hi iLen,
    The website is:

    https://gatheringdreams.com

    What kind of access do you need?

    Thanks for your help πŸ™‚

    #5379
    Sara Trezzi
    Participant

    Hello!
    Haven’t heard about how to centre the comments?
    You mentioned you needed access?
    I send you a link to one of the posts where you can see the related posts.
    Please let me know as I would love to fix it!
    Sara

    #5380
    iLen
    Keymaster

    Hi, Sorry for the delay, I’ve been focused on the new version of Yuzo but I’ve arrived πŸ˜„

    To center the related on your site you just have to go to: Yuzo Setting -> Styling -> Css custom and add this code:

    .yuzo_related_post .yuzo_wraps{
        text-align: center;
        margin: 0 auto;
        width: 70%;
        display: block;
    }

    To center the title of the related post:

    .yuzo__title {
        text-align: center;
    }

    I await your response if it meets your requirements 😎

    #5384
    Sara Trezzi
    Participant

    Hey iLen,
    No worries πŸ™‚

    This works great on desktop! Thank you!
    But it doesn’t seem to work on mobile. The related posts are now slightly off centre.

    Any ideas as to what I can do to fix it on mobile?

    Thanks πŸ™‚

    #5387
    iLen
    Keymaster

    try this code:

    @media all and (max-width: 1023px) {
      	.yuzo_related_post .relatedthumb {
        	float: none!important;
        	margin: 0 auto!important;
    	}
    }

    I await your response

    #5388
    Sara Trezzi
    Participant

    Thank you iLen!
    It almost worked. Now it’s perfect on mobile, but the images are slightly off center to the left on desktop.

    See example:
    https://gatheringdreams.com/make-money-from-home/

    Thanks so much!
    Sara

    #5389
    iLen
    Keymaster

    add this code

    .yuzo_related_post .yuzo_wraps{
           padding-left: 45px;
    }

    I await your response

    #5390
    Sara Trezzi
    Participant

    Thank you iLen.
    This now fixed it on Desktop, but broke the mobile version. The mobile version is off center to the right now.

    #5391
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.