Shopify themes, liquid, logos, and UX
I want to change the image size on my mobile view only, not really the size I just wanna remove the padding around the image to make it the full width and height of the screen.
Ive attached examples to show what im trying to figure out, im using the newest version of Dawn
EXAMPLE: THIS IS WHAT I HAVE
EXAMPLE: THIS IS WHAT I WANT IT TO LOOK LIKE
Solved! Go to the solution
This is an accepted solution.
Thanks, for the info. Check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
section#MainProduct-template--16666186809524__main .page-width {
max-width: 100%;
padding: 0;
}
}
And save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @MrStoney
Would you mind to share your store URL? Thanks!
Add This Code In Edit Code > Base.css File
@media screen and (max-width:767px) {
.header__heading-logo{
width: 100%;
}
.header__heading-link{
padding: 0 !important;
}
}
If you require further help to optimize your store, please don’t hesitate to reach out.
This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Contect On My Mail :-Mail@gmail.com
That didn't seem to change anything
Was that the code to remove the padding around the image?
Hello,
I'm currentyly facing the same obstacle, however the code did not work for me... Would you know what the issue is?
This is an accepted solution.
Thanks, for the info. Check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
section#MainProduct-template--16666186809524__main .page-width {
max-width: 100%;
padding: 0;
}
}
And save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
is there a way to apply this change to all the products in the store?
Hello,
I'm currentyly facing the same obstacle, however the code did not work for me... Would you know what the issue is?
Would you mind to share your store URL? Thanks!
Hi, thanks for the immense quick reply, I didn't expect it to be this fast! Anyways, here is the URL:
https://525515-2c.myshopify.com/products/airtoss
By the way I don't know if it matters alot to you, but it's mainly the phone view where I can't seem to be able to remove the upper and side padding from...
Its password protected.
Oh shoot, that's my bad I thought I had removed it, but apparently not, my apoligies. I just removed it
Just to be sure it's the same store, this is the correct link:
https://525515-2c.myshopify.com/products/airtoss
No worries,
check this one then.
From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media screen and (max-width: 749px) {
.grid--peek.slider .grid__item:first-of-type {
margin-left: 0px;
}
.slider.slider--mobile .slider__slide {
margin-top: 0px;
}
section#MainProduct-template--21669477941572__main .page-width {
padding-right: 0px;
}
}
And Save.
result:
It worked!!! Thank you so much, I have been trough trial and erros myself and did eveyrthing but succeed haha. Anyways thanks again for helping me out here, it's highly appriciated over.
Hi again,
I wanted to thank you personally again for helping me out with the custom code to make the product image full width, which it, did but it also unfortunately, I just now noticed, affects the enitre page widh for some reason even though the page itself is not targeted.
It was happedend right after I implemented the code gave me. I already tried to change up @media screen to @media only screen, which did nothing I'm sad to say, I'm sure it's a very tiny tweek, but I as a non-coding expert wouldn't know 😅
Anyways I was just hoping you could help me out one last time, but I completely understand if not and hopefully this will be the last time I will have to bother you again haha - Almost forgot to add but there is this weird line above the image, it should not appear, I'll go check out if it has something to do with the upper section, but you can't tell me right off the bat what is causing it right?
- I have also send you a private message actually displaying the issue.
Kind regards Dorian van der Spoelcordacc
Add: it won't let me send you a private message, but if you check the site out in mobile view and slide to the left and right you, also checking the shopping cart, you'll see what the issue is.
Kind regards Dorian van der Spoelcordacc
Did you already solve the problem?
Hello, are you able to help me? I have tried every solution mentioned in this thread and none seem to work. not sure if anything has changed in the last few months. I am using the dawn theme.
Hi @Alexbunce1
Would you mind sharing your store URL? Thanks!
Hey there,
On your Theme Settings, at the bottom you can see "Custom CSS"
Add:
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024