Archived topic
Change featured image location on mobile
8 replies · Started by Afroze on June 17, 2017
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?
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?
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.
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?
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?
@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.
Try this:
@media (min-width: 769px) {
.post-image-below-header.post-image-aligned-right .post-image {
margin-top: -30px;
}
}
Thanks a lot, again!
The !important keyword after the margin change did the trick :)
Awesome :)