Resizing the feature image and aligning the entry title for Mobile
-
AuthorPosts
-
jamesbamford
MemberFirstly, I’m loving your theme. Thank-you for all of the hard work put into it and the help you give everyone. Your answers to others have helped me as well.
I’m having an issue with the featured image on mobile. The image was so large there. I managed to add to the CSS for mobile
#page-header { background-size: contain; background-position: left top; }
This fixed the width so I could see all of the image and got rid of the space between the logo and page header. However now the entry-title sits way below the feature image and the content way below that. Essentially, I want to shrink the feature image but have everything align like it does on desktop. Is there a better way – upload and set a different size image for mobile?
Regards, Maryanne
mkrdip
Theme AuthorHi there,
Please share your website URL. I surely can help.
Thanks
I sent the URL to you via email and have added you to the team. Did you receive it?
Regards, Maryanne
The email that I sent was on the 31st Dec. Thanks, Maryanne
mkrdip
Theme AuthorHi Maryanne,
Sorry for the late response. I responded to your last reply. The reply is here again:
Please remove your old CSS and use this:
@media only screen and (max-width: 640px) { #page-header { background-size: contain; background-position: left top; height: 200px; } }
If you want a different image on the device/screen of 640px width or less. Then you can use the following instead of the code I provided above.
@media only screen and (max-width: 640px) { #page-header { background-image: url(your-image-url) !important; } }
Cheers!
Thanks I tried both solutions but they didn’t seem to work. Regards, Maryanne
mkrdip
Theme AuthorHi there,
Replied to your email with the following snippet:
please use the following code with a smaller image suitable for mobile devices. @media only screen and (max-width: 640px) { #page-header { background-image: url(https://creativeportfoliodemo.files.wordpress.com/2015/01/fc-post-tags.png) !important; }
Cheers
explorabilia
MemberHi there,
I had a similar issue on the mobile version of my site http://www.explorabilia.co.uk.
I have used your CSS and the featured images are now properly scaled, however I am now getting a black filler box underneath.. any way to make this fully responsive?
best regards,
Evan
- The topic ‘Resizing the feature image and aligning the entry title for Mobile’ is closed to new replies.