I designed this banner as 1280 x 40. I would like it to be reduced size to try and fit in perfectly not zoomed in how it is showing. Here is an example and the url to my store.
url: hygiadental.com
pw: melek
1 Like
Hi @Anonymous ,
The banner is currently not present on the site. Can you add that banner so that i can write custom CSS for it?
Thank you
Hi @Anonymous
You can try to add this code to Custom CSS of that section to check
img { object-fit: contain; }
How it looks when using that code
Hi @Anonymous ,
To reduce the banner size and ensure it fits nicely, you can add custom CSS to your Shopify theme. Here’s how:
-
Go to Online Store > Themes.
-
Click on Actions next to your current theme and select Edit code.
-
In the code editor, locate the theme.liquid file. This is typically found under the Layout folder.
-
Scroll to the bottom of the theme.liquid file, and just above the closing tag, add the following custom CSS code:
Refrer the below screenshot
- Click Save to apply the changes.
This code ensures that the banner image will fit nicely within its container by using the object-fit: contain; property for screens that are at least 750px wide. This should help in reducing the banner size to fit the layout better.
I hope this helps! If it does, please like it and mark it as a solution!
If you need further assistance, feel free to reach out!
Regards,
Sweans
- Here is the solution for you @Anonymous
- Please follow these steps:
- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
img {
object-fit: contain !important;
}
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
Hi Sweans,
The code works and it reduces the size, though I am still wanting it to be reduced by alot! I am wanting it to be the same size as the announcement bar on the top.
It needs to be small enough so the shop now button is still on the landing page.
If you can help, it would be greatly appreciated!
Hi Dan
The code works and it reduces the size, though I am still wanting it to be reduced by alot! I am wanting it to be the same size as the announcement bar on the top.
It needs to be small enough so the shop now button is still on the landing page.