I have free versions of Astra and Elementor and am trying to figure out how to make the header image look good for both desktop and mobile (though mostly mobile). I feel like I’m going to need a different image size for mobile vs desktop, but I cannot figure out what the size should be.
I keep playing around with the settings in elementor and nothing looks good…zooms in too much or cuts off parts of the image I don’t want cut off… Can someone help me figure this out? I’m still learning about how to change the different setting options to make a header image appear differently on my page and could use someone with more expertise to help me sort it out.
Here’s the temp site homepage I’m working on right now:
[https://ab0bae885310598448.temporary.link/The](https://ab0bae885310598448.temporary.link/The) original image is found here: [https://s3-media0.fl.yelpcdn.com/bphoto/\_ZnG-YQuSRmCwhmhcleKYg/o.jpg](https://s3-media0.fl.yelpcdn.com/bphoto/_ZnG-YQuSRmCwhmhcleKYg/o.jpg)If I need to edit the image I can do that, I just haven’t been able to figure out what would look good.
Design is not my strength. I could really use some help. I’ve been fiddling with this damn header off and on for months and I just need someone that knows more than me to help me sort it out, I think….
[ad_2]
I would set the background position to top left for desktop and tablet devices. Additionally, for mobile devices, I would use a cropped image with a width of 450px. I would also make the top navigation relatively positioned or add top padding navigation header height for hero section. Furthermore, I would move the hero text down slightly on desktop to make the hero section higher.