https://uniquegiftsandkeepsakes.com/
geefle
Header image set to large. I have started at 1200 x 400 px [email removed] 300 dpi and taken the image down to 700 px x 233 px.
I have tried adjust to first image, small, medium and large sizes for header image choices.
All I would like is the entire width to show in a web browser when viewing store and just the text and shop all is fine for phones.
Thanks in advance!
p.s. why is there not recommended sizes for header images. Not everybody knows how to code CSS. 
@cinderella518 right now it is showing as you have mentioned above
Hi @cinderella518
You can solve the issue with image quality by removing those codes in the image-banner.liquid file
And then follow steps below so you can use different images for mobile, desktop
- Create 2 image banner section, one for desktop and one for mobile
- Add this code to the desktop section
@media (max-width: 749px) {
.banner { display: none; }
}
- Add this code to Custom CSS of mobile section
@media (min-width: 750px) {
.banner { display: none; }
}
Hi @cinderella518
Since Shopify themes automatically resize images based on screen size, here’s how you can fix it:
In Shopify Admin go to Online Store and select Themes and go to Edit Code
Open theme.css, base.css, or custom.css based on the theme you are using and paste the code in the bottom of CSS file .
/* Ensure full-width header image on desktop /
.header-image img {
width: 100% !important;
height: auto !important;
max-height: 400px; / Adjust height as needed */
object-fit: cover;
}
/* Adjust header for mobile /
@media screen and (max-width: 768px) {
.header-image img {
height: 250px !important; / Adjust for better mobile display */
}
.header-text {
font-size: 18px !important; /* Adjust text size */
text-align: center;
}
}
Let me know if this works
Thank you I will try that!
Thank you I will try the coding today!
It worked for the header. I am not quite sure where in the code to insert the mobile part? Can you send a screenshot please?
