Shopify themes, liquid, logos, and UX
Hi all,
I have a lot of questions that needs to be addressed, and I would appreciate if someone could kindly assist me to:
I am using "Capital" theme. Here is my website preview URL: https://bufgt13u9jglt82j-52401635487.shopifypreview.com
Thank you.
Solved! Go to the solution
This is an accepted solution.
thanks for update try this code
@media (max-width: 720px) {
.footer-menu a {font-size: 12px;}
}
Decrease the font size of the products name and price
@media (max-width: 720px) {
.product-item-brand, .product-item-price, .product-item-title, .product-item .product--item-title {
font-size: 13px;
}
}
Justify the "ABOUT US" text
@media (max-width: 720px) {
#shopify-section-template--15121125834911__main main.rich-text {
text-align: justify;
}
}
Reduce the button size of the products size options (i.e. XSmall, Medium, etc.) to make fit in one row
@media (max-width: 720px) {
.form-swatch-item {
width: 34%;
}
}
This is an accepted solution.
To reduce the button size add the code in theme-product.min.css
@media (max-width:720px) {
.product-swatches .form-swatch-item {
width: 33.33%;
}
}
sorry for that issue
can you please provide each issue image so i will guide and give you proper code
Thank you. I apologize for the late reply.
I am attaching the pictures as per the numbering for your reference.
@KetanKumar Hi - I’ve forgot to mention you earlier. Could please see the above details and advise?
thanks a lot.
This is an accepted solution.
thanks for update try this code
@media (max-width: 720px) {
.footer-menu a {font-size: 12px;}
}
Decrease the font size of the products name and price
@media (max-width: 720px) {
.product-item-brand, .product-item-price, .product-item-title, .product-item .product--item-title {
font-size: 13px;
}
}
Justify the "ABOUT US" text
@media (max-width: 720px) {
#shopify-section-template--15121125834911__main main.rich-text {
text-align: justify;
}
}
Reduce the button size of the products size options (i.e. XSmall, Medium, etc.) to make fit in one row
@media (max-width: 720px) {
.form-swatch-item {
width: 34%;
}
}
Hi @fahadalduhami
1) To Decrease the mobile body font size
Go to section-footer.min.css file and add the code
@media (max-width:720px) {
.footer-menu a {
font-size: 12px;
}
}
2) To Decrease the font size of the products name and price
Go to theme-collection.min.css and paste the code at the end
@media (max-width:720px) {
.product-item .product--item-title {
font-size: var(--body-size-mobile);
}
}
3) Justify the "ABOUT US" text
add code in theme.min.css file
@media (max-width:720px) {
#shopify-section-template--15121125834911__main .rich-text {
text-align: justify;
font-size: 12px;
}
}
This is an accepted solution.
To reduce the button size add the code in theme-product.min.css
@media (max-width:720px) {
.product-swatches .form-swatch-item {
width: 33.33%;
}
}
User | RANK |
---|---|
164 | |
142 | |
74 | |
68 | |
57 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023