How can I change the LOFT theme slideshow heading size?

Store Design
1

Hello All,

I am trying to change the size of the heading in the LOFT theme slideshow (desktop & Mobile). i wasn’t able to find anything online. Can you suggest something.

2

@Aminm

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Thnk you for your reply Kumar.

this is the URL:https://shop.iconbest.com/

the header is in the slideshow [ 2nd & 3rd ]

4

@Aminm

thanks for URL yes please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
/* Desktop */
@media screen and (min-width: 769px) {
#block--1599582345376-2 h2 {
    font-size: 36px;
}
#block--1599582345376-0 h2 {
    font-size: 36px;
}
}

/* Mobile */
@media screen and (max-width: 768px) {
#block--1599582345376-2 h2 {
    font-size: 30px;
}
#block--1599582345376-0 h2 {
    font-size: 30px;
}
}

change font size as you like…

5

Thank you Kumar, That works.

But in the same slideshow, under the shop now button there is 3 lines, how can i control them? i need to make them smaller & push them close to the button?

Thanks in advance.

6

@Aminm

desktop or mobile please share issue image?

7

in both, the screen shot is from desktop, both have the same issue.

Aminm_0-1630681314993.png
Aminm_0-1630681314993.png254×230 1.83 KB

8

@Aminm

i have checked bt i can’t see any issue its work

9

i want to modify the space between the button [shop now] & the the 3 lines below it.

Aminm_0-1630698135915.png
Aminm_0-1630698135915.png222×205 11.1 KB

10

@Aminm

yes please add this code

.slideshow__dot-wrapper .flickity-page-dots {padding-top: 20px;}
11

thank you Kumar, that works.

One last question, i want also to modify the size of the H3 , the line below the title : https://shop.iconbest.com/

Aminm_0-1631021433754.png
Aminm_0-1631021433754.png523×155 12.8 KB

12

@Aminm

yes please add this code

/* Desktop */
@media screen and (min-width: 769px) {
#block--1599582345376-2 p {
    font-size: 16px;
}
#block--1599582345376-0 p {
    font-size: 16px;
}
}

/* Mobile */
@media screen and (max-width: 768px) {
#block--1599582345376-2 p {
    font-size: 14px;
}
#block--1599582345376-0 p {
    font-size: 14px;
}
}