How to decrease font size, justify text, add products gallery slider, and reduce button box size

[fahadalduhami]

Hi all, 

I have a lot of questions that needs to be addressed, and I would appreciate if someone could kindly assist me to:

1. Decrease the mobile body font size
2. Decrease the font size of the products name and price
3. Justify the "ABOUT US" text
4. Add arrows "sliders" to the products gallery (instead of tapping at each picture)
5. Reduce the button size of the products size options (i.e. XSmall, Medium, etc.) to make fit in one row

I am using "Capital" theme. Here is my website preview URL: https://bufgt13u9jglt82j-52401635487.shopifypreview.com

Thank you.

[KetanKumar · Accepted solution]

@fahadalduhami 

thanks for update try this code

1. 1. Go to Online Store->Theme->Edit code
   2. Asset->/section-footer.min.css->paste below code at the bottom of the file.

1. Decrease the mobile body font size

@media (max-width: 720px) {
.footer-menu a {font-size: 12px;}
}​

Decrease the font size of the products name and price

1. 1. Go to Online Store->Theme->Edit code
   2. Asset->/theme-collection.min.css->paste below code at the bottom of the file.

@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

1. 1. Go to Online Store->Theme->Edit code
   2. Asset->/theme.min.css ->paste below code at the bottom of the file.

@media (max-width: 720px)  {
#shopify-section-template--15121125834911__main main.rich-text {
    text-align: justify;
}​
}

1. Add arrows "sliders" to the products gallery (instead of tapping at each picture)
   It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me
   
   

Reduce the button size of the products size options (i.e. XSmall, Medium, etc.) to make fit in one row

1. 1. Go to Online Store->Theme->Edit code
   2. Asset->/theme-product.min.css ->paste below code at the bottom of the file.

@media (max-width: 720px) {
.form-swatch-item {
    width: 34%;
}
}​

[KetanKumar]

@fahadalduhami 

sorry for that issue 

can you please provide each issue image so i will guide and give you proper code

[fahadalduhami]

 

 

 

 

 

Thank you. I apologize for the late reply. 

I am attaching the pictures as per the numbering for your reference. 

[fahadalduhami]

@KetanKumar Hi - I’ve forgot to mention you earlier. Could please see the above details and advise? 

thanks a lot. 

[KetanKumar · Accepted solution]

@fahadalduhami 

thanks for update try this code

1. 1. Go to Online Store->Theme->Edit code
   2. Asset->/section-footer.min.css->paste below code at the bottom of the file.

1. Decrease the mobile body font size

@media (max-width: 720px) {
.footer-menu a {font-size: 12px;}
}​

Decrease the font size of the products name and price

1. 1. Go to Online Store->Theme->Edit code
   2. Asset->/theme-collection.min.css->paste below code at the bottom of the file.

@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

1. 1. Go to Online Store->Theme->Edit code
   2. Asset->/theme.min.css ->paste below code at the bottom of the file.

@media (max-width: 720px)  {
#shopify-section-template--15121125834911__main main.rich-text {
    text-align: justify;
}​
}

1. Add arrows "sliders" to the products gallery (instead of tapping at each picture)
   It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me
   
   

Reduce the button size of the products size options (i.e. XSmall, Medium, etc.) to make fit in one row

1. 1. Go to Online Store->Theme->Edit code
   2. Asset->/theme-product.min.css ->paste below code at the bottom of the file.

@media (max-width: 720px) {
.form-swatch-item {
    width: 34%;
}
}​

[oscprofessional]

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;
}
}

[oscprofessional · 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%;
}
}