Hi, wondered if anyone can give me some advice. I have designed two different sized banners for both mobile and destop. Using code from the community I have changed it so only shows image one on destop and image two on mobile however the mobile banner is really blow up and I cant change the height of the image. I have created the mobile banner with a much larger height to fit a mobile device. If there is a way to make the mobile image fit to screen so using the full width and height without changing the destop banner image. if that makes sense. Any help would be great.
One option is to use CSS media queries to adjust the height of the mobile banner image based on the screen size. For example, you can set a maximum height for the mobile banner image, and then use CSS to adjust the height based on the screen size.
Another option is to use a responsive image solution, such as the HTML “srcset” attribute or the “picture” element. This allows you to provide different versions of the same image for different screen sizes, so the appropriate version can be loaded based on the user’s device.
You may also want to consider optimizing your images for web to reduce the file size and improve load times.