Change the size of text and images on the mobile version

[LucaColella1]

Hello Shopify Community,

I would like to know how to change the text size and colour, and some images on the mobile version of my website’s Home Page (and where exactly to add each piece of coding [theme.css?])

As per the attached images, I would like to change the following:

1. font size of the main menu (Home, Shop etc.)

2. font size and colour of the banner

3. font and image size of the collections

4. font size and colour of the carousel images

5. ‘Our Story’ image size (not sure why it’s separated from the text)

Any help is much appreciated!

Ps: the website is live so you can check the mobile version here www.beddybyes.co .

Thanks

Luca

[PageFly-Victor]

Hi @LucaColella1 !

This is PageFly - Advanced Page Builder. I would love to give you some recommendation.

Bro which size and color you want kindly send me details thanks;

You want like this to change size;

Best Regards;

Pagefly

[DavidEKim]

@LucaColella1

Hi,

Please add the code below to assets/theme.css file and modify per your needs.

/* Mobile Only */
@media only screen and (max-width: 767px) {
/* Menu Font Size & Font Family */
  .sliderow__title {
    font-size: 24px;
    font-family: 'Cabin';
  }
/* Banner Font Size, Color & Line Height */
  .hero__description.h5--body.aos-init.aos-animate p {
    font-size: 16px !important;
    color: #000;
    line-height: 1.5em;
  }
/* Banner Button Font Size & Color */
  a.btn--soft.btn--neutral.hero__btn.btn--long.uppercase.aos-init.aos-animate {
    font-size: 24px;
    color: #000;
  }
/* Banner Button Font Size & Color */
  h2.hero__title.h4 {
    font-size: 24px;
    color: #000;
  }
/* Collection Banner padding width for image */
  div.homepage-collection-grid>.wrapper {
    padding: 0;
  }
/* Carousel Header Font Size & Color */
  h1.hero__title.h2.aos-init.aos-animate {
    font-size: 24px;
    color: #000;
  }
/* Carousel Content Font Size & Color */
  .hero__description.h5--body.aos-init.aos-animate {
    font-size: 16px;
    color: #000;
  }
}

For the last question for Our Story page image banner, I don’t find any issue and I guess you already found a solution. To modify, please refer to the comment in the code.

Hope it helps.

Thanks.

[LucaColella1]

Thank you this is perfect - I will mark your response as an accepted solution.

As I have you here may I ask you one more question, please? I want to add a .png design as the background behind the various elements of the home page (banner, collections etc.) and other pages throughout the site. I would like to be able to play around with its transparency and dimensions, does Pipeline allow this? Is there a piece of coding I could be using?

Here’s the file:

Ps: let me know if I have to create a new ‘question’ sorry I’m still new to this community.

Thank you and kind regards

Luca