Resizing the feature image and aligning the entry title for Mobile

Author

Posts
December 1, 2019 at 9:56 am #149668
jamesbamford
Member
Firstly, 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
December 30, 2019 at 4:58 am #150210

mkrdip
Theme Author

Hi there,

Please share your website URL. I surely can help.

Thanks

January 16, 2020 at 7:22 am #150644

jamesbamford
Member

Original poster

I sent the URL to you via email and have added you to the team. Did you receive it?

Regards, Maryanne

January 16, 2020 at 7:28 am #150645

jamesbamford
Member

Original poster

The email that I sent was on the 31st Dec. Thanks, Maryanne

January 17, 2020 at 3:37 am #150660
mkrdip
Theme Author
Hi 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!
January 27, 2020 at 7:40 am #150899

jamesbamford
Member

Original poster

Thanks I tried both solutions but they didn’t seem to work. Regards, Maryanne

February 4, 2020 at 1:18 am #151094
mkrdip
Theme Author
Hi 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
March 10, 2020 at 9:56 am #151995

explorabilia
Member

Hi 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.

No items found.