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

Solved
fahadalduhami
Tourist
5 0 2

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.

Accepted Solutions (2)

Accepted Solutions
KetanKumar
Shopify Partner
24923 2498 9041

This is an 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%;
}
}​

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

oscprofessional
Shopify Partner
9201 1563 1928

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%;
}
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Replies 6 (6)
KetanKumar
Shopify Partner
24923 2498 9041

@fahadalduhami 

sorry for that issue 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
fahadalduhami
Tourist
5 0 2

DA974657-D27C-49EF-869B-18FCBF324F30.jpeg

FE5CAD55-358C-4C70-93C6-00A878863556.jpeg

7B1A03B5-388A-4D9D-B1B4-201E1996375C.jpeg

F89F1FA4-ADA7-4BA5-AAB4-4DF48F993724.jpeg

3A1B7327-6531-4F45-A0DE-6E18692AB657.jpeg

Thank you. I apologize for the late reply. 

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

fahadalduhami
Tourist
5 0 2

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

thanks a lot. 

KetanKumar
Shopify Partner
24923 2498 9041

This is an 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%;
}
}​

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

oscprofessional
Shopify Partner
9201 1563 1928

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



 

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
oscprofessional
Shopify Partner
9201 1563 1928

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%;
}
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post