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

Store Design
1

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.

2

@fahadalduhami

sorry for that issue

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

3

DA974657-D27C-49EF-869B-18FCBF324F30.jpeg
DA974657-D27C-49EF-869B-18FCBF324F30.jpeg1125×2056 132 KB

FE5CAD55-358C-4C70-93C6-00A878863556.jpeg
FE5CAD55-358C-4C70-93C6-00A878863556.jpeg1125×2436 107 KB

7B1A03B5-388A-4D9D-B1B4-201E1996375C.jpeg
7B1A03B5-388A-4D9D-B1B4-201E1996375C.jpeg1125×2328 245 KB

F89F1FA4-ADA7-4BA5-AAB4-4DF48F993724.jpeg
F89F1FA4-ADA7-4BA5-AAB4-4DF48F993724.jpeg1125×2436 139 KB

3A1B7327-6531-4F45-A0DE-6E18692AB657.jpeg
3A1B7327-6531-4F45-A0DE-6E18692AB657.jpeg1125×2436 153 KB

Thank you. I apologize for the late reply.

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

4

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

thanks a lot.

1 Like
5

@fahadalduhami

thanks for update try this code

    1. Go to Online Store->Theme->Edit code
    2. Asset->/section-footer.min.css->paste below code at the bottom of the file.
  2. 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. 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. 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. 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%;
}
}​
1 Like
6

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;
}
}
  1. 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);
}
}
  1. 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;
}
}
7

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%;
}
}
1 Like