Premium Theme Support › We Cobble › Creative Portfolio

Resizing the feature image and aligning the entry title for Mobile

  • Author
    Posts
  • #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

    #150210

    mkrdip
    Theme Author

    Hi there,

    Please share your website URL. I surely can help.

    Thanks

    #150644

    jamesbamford
    Member

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

    Regards, Maryanne

    #150645

    jamesbamford
    Member

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

    #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!

    #150899

    jamesbamford
    Member

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

    #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

    #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

  • Author
    Posts

The topic ‘Resizing the feature image and aligning the entry title for Mobile’ is closed to new replies.