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 |
---|---|
191 | |
172 | |
84 | |
57 | |
45 |
Transform this holiday season into a shopping spree. Plus, learn how to effortlessly open ...
By Jasonh Dec 8, 2023Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023