[Resolved] Change featured image location on mobile

Home Forums Support [Resolved] Change featured image location on mobile

Home Forums Support Change featured image location on mobile

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #335053
    Afroze

    Hi again,

    I was wondering if there was any way to have different locations for the “featured image” in desktop and mobile view?

    I would like it to be “Above Title” in the desktop mode, and “Below Title” in the mobile mode.

    If that’s not possible, is there any way I can move the image a few pixels upwards, using html or something?

    #335162
    Tom
    Lead Developer
    Lead Developer

    That would be difficult – you would have to add the featured image twice, then hide/show using CSS.

    I’m sure you can move it up though – can you link me to the page?

    #335253
    Afroze

    Thanks for the reply, Tom. Here is the page: http://afroze.me/blog/

    Currently,I set the featured image to “Below Title”, which looks good in mobile mode, but off in desktop mode. Here is how it is supposed to look like in the desktop mode:
    https://pasteboard.co/XPzTsaMH.png

    So the question is, if I can move the featured image a few pixels upwards (while still being in “Below Title” mode), so it resembles the layout in the image.

    #335315
    Leo
    Staff
    Customer Support

    Sorry I’m a little confused.

    The layout in the image is the same as what you have right now? This is what I see:
    https://s8.postimg.org/phfs49t3p/layout.png

    Are you wanting the featured image to line up above the title?

    #335367
    Tom
    Lead Developer
    Lead Developer

    Setting it to “Above title” would fix that extra spacing. But then the issue is you don’t want it above the title on mobile, is that right?

    #335411
    Afroze

    @Leo.
    That’s weird, what I see is this:
    https://pasteboard.co/17Ilyiv8z.png


    @Tom
    .
    Yes, that’s exactly correct. I want it below the title on mobile, but want to get rid of the extra spacing on the desktop.

    #335472
    Tom
    Lead Developer
    Lead Developer

    Try this:

    @media (min-width: 769px) {
        .post-image-below-header.post-image-aligned-right .post-image {
            margin-top: -30px;
        }
    }
    #335616
    Afroze

    Thanks a lot, again!
    The !important keyword after the margin change did the trick ๐Ÿ™‚

    #335767
    Tom
    Lead Developer
    Lead Developer

    Awesome ๐Ÿ™‚

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