Change Website Main Image Dimensions Using CSS

  • Resolved amira20

    (@amira20)


    1 year, 10 months ago

    Hello,

    I am building a website using one of Neve templates and Otter blocks , I need to change the website’s pages main image size in mobile view to be different than the main image size in the desktop version. as I need main image size in the desktop version 1920 * 628 , and for mobile view 1920 * 1400

    My question is, can I do that action using CSS please? and if yes, could I have the code sample please and the steps that I have to take in implementing that code? (where to add it, what the things that I have consider,..)

    Also, if it is an easier/faster way to do that action rather than using CSS, what is it please?

    I will be waiting for the response please

    Thank you

    • This topic was modified 1 year, 10 months ago by amira20.
Viewing 4 replies - 1 through 4 (of 4 total)
  • mara3

    (@mara3)

    1 year, 9 months ago

    Hi @amira20,

    Thank you for using Neve!

    To adjust the image dimensions differently for desktop and mobile you can explore two options.

    1. Go into the Customizer -> Layout -> Page and if here you have the Header Layout set to Cover then you can set the height for desktop and mobile individually by click on the specific icon and introducing the height value.
    2. Use CSS by going into the Customizer -> Additional CSS and add this code to individually restrict the size of the image based on the device:
    @media only screen and (min-width: 1024px) {
        .wp-block-image.size-full img {
            width: 1920px;
            height: 628px; 
        }
    }

    @media only screen and (max-width: 767px) {
        .wp-block-image.size-full img {
            width: 1920px;
            height: 1400px;
        }
    }

    Please let us know if this helps!

    Kind regards,

    Mara

    Thread Starter amira20

    (@amira20)

    1 year, 9 months ago

    Hello Mara,

    Thank you for your reply.

    For the first suggestion, I actually don’t use the cover layout so unfortunately this solution does not work for me

    As for the second suggestion (using CSS code), I tried it in mobile review but it only changes the size/dimensions of the existent image so the resolution of the used image goes too pixelated , as it resize the image that is used for desktop version, so the problem still exists

    So is there an option to upload an image with a mobile size/dimension in only the mobile preview? Or how to prevent the image resolution interruption when defining the CSS code in mobile preview section?

    I am waiting of your reply as I am do not know how to do and this issue must be fixed!

    Thank you

    Thread Starter amira20

    (@amira20)

    1 year, 9 months ago

    hello @mara3

    Any solution please?

    I will be waiting for your response

    Thank you

    mara3

    (@mara3)

    1 year, 9 months ago

    Hey there!

    Thank you for keeping us updated!

    To set different images for mobile and desktop in order to get rid of the pixelation problem, you can use the Otter Blocks plugin which comes with the Section Block. By using a Section Block you can set visibility conditions and choose it to be hidden on mobile, therefore visible on desktop and vice versa.

    To do that simply add a Section Block -> add an image inside -> in the right tab Visibility Conditions should appear; open the settings for the Rule Group -> select Screen Size as the condition -> Hide on Mobile/Desktop. Add another Section Block in the same way and hide it on the other device and you should be all set.

    Please let us know if you need assistance with anything else!

    Kind regards,

    Mara

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

The topic ‘Change Website Main Image Dimensions Using CSS’ is closed to new replies.