Title: Change Website Main Image Dimensions Using CSS
Last modified: August 15, 2024

---

# Change Website Main Image Dimensions Using CSS

 *  Resolved [amira20](https://wordpress.org/support/users/amira20/)
 * (@amira20)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/change-website-header-image-dimensions-using-css/)
 * 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](https://wordpress.org/support/users/amira20/).

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

 *  [mara3](https://wordpress.org/support/users/mara3/)
 * (@mara3)
 * [1 year, 10 months ago](https://wordpress.org/support/topic/change-website-header-image-dimensions-using-css/#post-17956941)
 * Hi [@amira20](https://wordpress.org/support/users/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:
 *     ```wp-block-code
       @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](https://wordpress.org/support/users/amira20/)
 * (@amira20)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/change-website-header-image-dimensions-using-css/#post-17973480)
 * 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](https://wordpress.org/support/users/amira20/)
 * (@amira20)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/change-website-header-image-dimensions-using-css/#post-17975684)
 * hello [@mara3](https://wordpress.org/support/users/mara3/)
 * Any solution please?
 * I will be waiting for your response
 * Thank you
 *  [mara3](https://wordpress.org/support/users/mara3/)
 * (@mara3)
 * [1 year, 9 months ago](https://wordpress.org/support/topic/change-website-header-image-dimensions-using-css/#post-17977655)
 * 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.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/neve/4.2.4/screenshot.png)
 * Neve
 * [Support Threads](https://wordpress.org/support/theme/neve/)
 * [Active Topics](https://wordpress.org/support/theme/neve/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/neve/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/neve/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [mara3](https://wordpress.org/support/users/mara3/)
 * Last activity: [1 year, 9 months ago](https://wordpress.org/support/topic/change-website-header-image-dimensions-using-css/#post-17977655)
 * Status: resolved