Hi there!
I am looking for help calibrating an image banner with a logo applied on top for mobile viewing. Currently, the image of my logo on top of the image banner is not scaling correctly for mobile viewing. I can’t figure out how to adjust the logo only as the image background is scaled just fine for mobile.
Thank you!
Can you please share store URL and if the store is password protected then please share password too so that I can check and guide you in detail
Hi @riveringroots ,
It seems that you are facing a sizing issue for your logo which is appearing above the banner image. In order to solve this issue, you need to find the class name of the image tag of the logo, this can be done by inspecting the code in a browser
Right click on mouse->Inspect->Hover over the image as shown in the screenshot below:
In the above image you can see an H1 tag, in your case will find an img tag, which will have multiple class names, you can see the class names of the h1 tag in the screenshot. You need to select the img tag and add the certain css to fix the issue.
First : Copy the class names from the img tag and write the css as follows, if it the class names is “logo site-logo banner-logo” then
.logo.site-logo.banner-logo {
width: 100%;
}
Second: You can insert the code to the website by going to shopify bakcend and follow these steps:
Online Store->Three dots near Current Theme->edit code-> assets->(base.css or theme.css or global.css)
You can insert the code in this file.
If you have any queries regarding solution please share your store url, and feel free to reply to this message
Thank you,
Sweans
pass: rtawmt
Let me know when you are ready for the site information. I’ve updated my password since posting it.
Hi, this did not work for me
It is unfortunate that the initial solution is not working for you, in order to find the correct solution please share the updated password of your store. So that I can look in to the issue and find the solution for you.
If you need further assistance, feel free to reach out!
Regards,
Sweans
Hi!
Thank you for taking a look. The password is rtawqpt
It is possible I didn’t write it out correctly from your explanation
I am still not able to access the store, the password seems to be incorrect again.
Also feel free to send me the password through DM.
If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!
Regards,
Sweans
Hi there!
I removed the password. You should be able to access the site now! My apologies
Hi there!
I removed the password. You should be able to access the site now! My apologies
I have looked at the issue you are facing, You can fix the problem by adding this CSS code block to either “section-image-banner.liquid”
or “section-image-banner.css” .
To do this follow these steps :
step 1 : Go to the edit code section of the active theme (You can refer my first reply to this thread to get to the edit code section)
Step 2: Locate either “section-image-banner.liquid” or “section-image-banner.css” (If you were not able to find these you can open the “theme.liquid” file instead.)
Step3: Add the below code to the opened file:
If you opened the CSS file add this to the bottom of the file:
.banner__content .banner__box .image_container {
width:100% ;
}
.banner__content .banner__box .image_container img.image{
object-fit:contain !important;
}
If you have opened a non CSS file(a liquid file) then enclose the code in a style tag and add to the bottom of the file. You can refer the screenshot below:
Please make sure to add the code as given in the screenshot (just above the closing of the body tag if you are in theme.liquid).
If you inserting the code in the section-image-banner.liquid, you just need to insert the code (with the style tag) at the bottom of the file.
Let me know if this has solved your issue. If you have found this helpful.
Leave a like and select this as the accepted solution.
Thank you
Regards,
Sweans
Hi @riveringroots
Try adding below code to where you have previously added the code for this section (after your code)
@media screen and (max-width:767px){
#shopify-section-template--17121712275614__image_banner .banner__content .image_container .image {
max-width: 100%;
object-fit: contain;
}
#shopify-section-template--17121712275614__image_banner .banner__content .image_container {
max-width: 100%;
}
}
If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!
Hi!
Thank you! This worked, but it only worked when I pasted the code you provided into the custom CSS on the admin editing side. I tried to paste in theme.liquid in both formats you recommend, and I tried the section.image.banner.liquid, but neither would translate. I am not sure why.