Shopify themes, liquid, logos, and UX
Hi,
I would like to change the font sizes as they are too big for product title and description in my mobile. Brooklyn Theme
And also, I would like to have 2 products per row in mobile. Can someone help?
123.https://babystoresale.com/
Solved! Go to the solution
This is an accepted solution.
Thanks for the password. Please add the following code at the bottom of your assets/theme.scss.liquid file.
@media screen and (max-width: 768px){
.template-index .rich-text__heading--large {
font-size: 2.3em;
}
body.template-index, body.template-collection{ font-size: 15px !important; }
}
This will reduce the size of the mobile for the home page and collection page.
Hope this works for you.
Thanks!
This is an accepted solution.
Please remove the old code and try the following code.
@media screen and (max-width: 768px){
.template-index #CollectionSection .grid__item.grid-product.medium--one-half{
width: 50%;
}
.template-collection .grid__item.grid-product.medium--one-half{
width: 50%;
}
.template-collection .grid-product__image-link{ width: 72% !important; }
.grid-product__title{font-size: 1em !important;}
}
Thanks!
This is an accepted solution.
Please remove the old code and try the following code.
@media screen and (max-width: 768px){
.template-index #CollectionSection .grid__item.grid-product.medium--one-half{
width: 50%;
}
.template-collection .grid__item.grid-product.medium--one-half{
width: 50%;
}
.template-collection .grid-product__image-link{ width: 100% !important; }
.template-collection .product--wrapper { margin: 0px auto !important;}
.grid-product__title{font-size: 1em !important;}
}
This is an accepted solution.
This is for desktop:
@media screen and (min-width: 769px){
.section-header { margin-bottom: 20px !important; }
.index-sections .shopify-section { margin-top: 50px !important; }
body:not(.template-index) .main-content {
padding-top: 50px !important;
}
}
This is an accepted solution.
Please add the following code.
input#Quantity, .js-qty__adjust .icon, .ajaxcart__qty input[type=text], ajaxcart__qty icon {
height: auto !important;
}
It doesn't work and I think you can post a reply here.
Someone else help please
Please share your password. It is not working.
Hi,
Its 1234
This is an accepted solution.
Thanks for the password. Please add the following code at the bottom of your assets/theme.scss.liquid file.
@media screen and (max-width: 768px){
.template-index .rich-text__heading--large {
font-size: 2.3em;
}
body.template-index, body.template-collection{ font-size: 15px !important; }
}
This will reduce the size of the mobile for the home page and collection page.
Hope this works for you.
Thanks!
Thank you very much! That worked..
Can you help me with fitting 2 products in a row for home page and in collection as well?
@Shafat wrote:Thank you very much! That worked..
Can you help me with fitting 2 products in a row for home page and in collection as well?
This for desktop or mobile?
Let me know.
Its for Mobile.. And also reduce the font size for Product title in mobile!
Please add the following code.
@media screen and (max-width: 768px){
.template-index #CollectionSection .grid__item.grid-product.medium--one-half{
width: 50%;
}
.template-collection .grid__item.grid-product.medium--one-half{
width: 50%;
}
.template-collection .grid-product__image-link{ width: 86% !important; }
.grid-product__title{ 1em !important; }
}
Hope this works.
Thanks!
@dmwwebartisan The code creates a mess in both web and mobile. I pasted the code in theme.scss.liquid.. Any reason why?
Please remove the old code and try the following code.
@media screen and (max-width: 768px){
.template-index #CollectionSection .grid__item.grid-product.medium--one-half{
width: 50%;
}
.template-collection .grid__item.grid-product.medium--one-half{
width: 50%;
}
.template-collection .grid-product__image-link{ width: 72% !important; }
.grid-product__title{ 1em !important; }
}
@dmwwebartisan I am still running into the same problem 😞 It didn't work properly.. It impacts both the web and phone look!
I checked but my side worked properly but let me check. I will get back to you.
This is an accepted solution.
Please remove the old code and try the following code.
@media screen and (max-width: 768px){
.template-index #CollectionSection .grid__item.grid-product.medium--one-half{
width: 50%;
}
.template-collection .grid__item.grid-product.medium--one-half{
width: 50%;
}
.template-collection .grid-product__image-link{ width: 72% !important; }
.grid-product__title{font-size: 1em !important;}
}
Thanks!
Ouh Man !!! That worked so nice.. Much appreciated !! The only thing I would like to change is to have the pics aligned on left and to be center aligned of the product title if just in case there is no 2 pics in a row. Are you able to help me also with deleting extra white spaces on both web and mobile?
Thanks a lot man! You're the best
This is an accepted solution.
Please remove the old code and try the following code.
@media screen and (max-width: 768px){
.template-index #CollectionSection .grid__item.grid-product.medium--one-half{
width: 50%;
}
.template-collection .grid__item.grid-product.medium--one-half{
width: 50%;
}
.template-collection .grid-product__image-link{ width: 100% !important; }
.template-collection .product--wrapper { margin: 0px auto !important;}
.grid-product__title{font-size: 1em !important;}
}
That works so great! Thanks alot man..
I just need to remove extra white spaces in mobile and web.. Too much of white space in home page, collection and in product page as well. I would really appreciate the help..
This is an accepted solution.
This is for desktop:
@media screen and (min-width: 769px){
.section-header { margin-bottom: 20px !important; }
.index-sections .shopify-section { margin-top: 50px !important; }
body:not(.template-index) .main-content {
padding-top: 50px !important;
}
}
Solved it: By keeping padding at 0
I just noticed the desktop one creates a white space gap on top of the announcement bar as well. Can you help me fix that ?
Thanks
Can you please provide a screenshot. I couldn't see any white gap on the desktop on the top.
Please let me know.
Thanks!
I adjusted for desktop but for mobile see below; I have a break somewhere for featured product but i cant find it where?
Sorry, but on the mobile view, I couldn't get the gap above the announcement bar.
I can live with that. Thank you very much.
Do you mind assisting me in having the quantity box in a perfect box? Its so crooked in product item view and in cart view for both mobile and web.. Thanks alot for your kind help
This is an accepted solution.
Please add the following code.
input#Quantity, .js-qty__adjust .icon, .ajaxcart__qty input[type=text], ajaxcart__qty icon {
height: auto !important;
}
That worked perfect for product page but its still the same for the cart drawer? Thank you.
Can you also help me on having a regular price on left, crossed out for sale price on right on all the pages for both mobile and web. I would also like it to be on a seperate line centred to the product. I would really appreicate that..
This is for mobile view.
@media screen and (max-width: 768px){
.index-sections .shopify-section {
margin-top: 25px !important;
}
body:not(.template-index) .main-content {
padding-top: 15px !important;
}
}
The desktop one works perfectly.
For the mobile it creates a gap at the top margin. And when i keep it as 0, it doesn't work properly.
I really appreciate your help man.
Hi, I tried using this in Studio Theme and it didn't work. Any suggestions? Thanks!!!
www.assifassefi.com pw skawst
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024