How can i make the image width 100% in responsive devices

#1

Here is my site tom-abraham.com . In project section how can i get project image 100% in responsive device. I think the problem arise when it is 1024 pixel.I can’t get the image fill the whole area

#2

@rabbit978 Hi …! you can try the following code or check the following link.

img.alldevices{ margin: 0 auto; height: auto; max-width: 100%; border: none; display: block; padding: 5px 0; }

W3School: https://www.w3schools.com/howto/howto_css_image_responsive.asp

And if you are working in WordPress CMS then there is an option given to set the images as per the devices with all the properties of the image.

#3

i am using wordpress

#4

@rabbit978 Which page builder you are using for design the web page layout?
For Example, Elementor or Visual Composer?
Let me know so I can help you with exactly where you can edit it.

#5

I am using elementor.The problem actually arise from 768 px

#6

Hello,

You have to remove the max-width at 90%, and also the left and right padding in 2 places:

image
image826×1292 92.3 KB

image
image502×954 156 KB

#7

what i am trying to do is make the boxes in project section have same height in all devices .

#8

Unfortunately I don’t think that is going to happen. Getting an identical presentation of a section of your website across various device manufacturers and different viewport sizes is pretty darn difficult, mostly because different devices use different rendering engines. I purchase a yearly subscription to a website called LambdaTest where you can test your mobile responsive designs on real devices to allow you to adjust your css, and I can tell you it is an exercise in frustration. A design never works across all devices… Having said that there are advanced css techniques you can try to use to target specific rendering engines, but none of my clients so far have demanded that of me. You can see some of the techniques here at browserstrangeness…

1 Like
#9