Responsive Featured Image

  • andrasch

    (@andrasch)


    5 years ago

    Hiya,

    I am trying to make the featured images responsive for each of my posts but I got stuck. The featured images look perfect in desktop view but they are too small in tablet and mobile view. It looks like the bottom and the upper part of the image have been cropped instead of the left and right parts of the images. How can I sort the responsiveness out in OceanWP? It looks like OceanWP doesnt let you customise anything separately so in mobile view and tablet view. Am I seeing this incorrectly? Can I please get some advice?
    Many thanks

Viewing 9 replies - 1 through 9 (of 9 total)
  • Abhishek

    (@abhikr781)

    5 years ago

    Hello,

    Kindly share the snapshot of the issue and page URL to check the issue.

    Thread Starter andrasch

    (@andrasch)

    5 years ago

    Hi, thanks for getting back to me. hope the below links work

    this is the link for the mobile view. the image is not responsive.
    http://hatizsakkal.hu/wp-content/uploads/2021/06/mobile-view.jpg

    this is the link for the desktop view, this looks ok
    http://hatizsakkal.hu/wp-content/uploads/2021/06/desktop-view.jpg

    please advise
    cheers

    Abhishek

    (@abhikr781)

    5 years ago

    Hello,

    The shared URLs not working.
    https://ibb.co/fdgmR14

    KIndly upload the snapshots here and also share the website URL.
    https://imgbb.com/

    Thread Starter andrasch

    (@andrasch)

    5 years ago

    Hi,

    here are the links
    https://ibb.co/JdfLYgM
    https://ibb.co/cYN51Tt

    so the featured image in desktop view is fine but in mobile view it is not.

    my site is not live so if the link in my previous message didnt work, I guess, the website URL wont work either?

    please advise
    thanks

    • This reply was modified 5 years ago by andrasch.
    Abhishek

    (@abhikr781)

    5 years ago

    Hello,

    ​Please try to add the below CSS code from the Appearance > Customize > Custom CSS, and check.

    @media only screen and (max-width: 959px){
.single .thumbnail img {
    height: 400px;
}
}

    PS- change the height value in the above code according to need.

    Thread Starter andrasch

    (@andrasch)

    4 years, 12 months ago

    thanks very much. I will give a try although I am not familiar with the codes at all. can this be resolved without coding?

    Abhishek

    (@abhikr781)

    4 years, 12 months ago

    Hello,

    As I’m not getting access to the page so unable to the found exact causes for the issue.
    If possible please share the steps to replicate teh issue, so I will try it on my local and able to suggest you the solution accordingly.

    Thread Starter andrasch

    (@andrasch)

    4 years, 12 months ago

    thanks a lot but this code did not change anything

    so in the Admin panel I created a new post as usual and added a featured image. This featured image appears in the header as you can see in the links in my previous message. In order to put the featured image in the header I went to Appearance > Customise > Blog > Single Post and checked the box at the ‘Featured image in page header’. However as you can see in the links in my previous message this featured image is not responsive. In mobile view the image looks very small. Every other element (buttons, header, title etc) in the post has been created with Elementor

    Abhishek

    (@abhikr781)

    4 years, 11 months ago

    Hello,

    Try the below CSS code and check.

    @media only screen and (max-width: 767px){
.background-image-page-header {
    height: 300px !important;
}
}

    PS- Change the height value according to need and check.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Responsive Featured Image’ is closed to new replies.