Reducing size of titles and pictures on product pages- Craft theme

Store Design
1

Hi there- I am setting up a new store using Craft theme. I’ve searched through the community for fixes and tried what was suggested and nothing has helped. Can someone suggest a solution for me?

I’d like to reduce the size of my product titles. (I’d also like to reduce the size of the titles on the additional pages I created in my navigation, if possible- seems to be the same issue).

I’d also love a solution for reducing the size of my product pictures on my collection pages. (I know I’m squeezing in a lot of questions here, so I can separate these out into separate threads if needed!).

Thanks in advance!

2

Hi @mystichairwear ,

Do you mind sharing you website so we can provide a specific code for you? Please share which additional pages do you need in the change?

You can follow the instructions below for the 2 requests.

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the codes below at the very bottom of the file.

To reduce the font size of the product title

.product__info-wrapper .product__title > h1 {
    font-size: 3rem;
}

Reduce the size of the product images in the collection

.collection .card__media {
    transform: scale(0.9);
}
2 Likes
3

Thank you so much! The first fix (for the product titles) did the trick! Much appreciated!

The second suggestion didn’t end up changing the main picture on the collection page (it changed the product pic). Here is an example page:

https://mystichairwear.myshopify.com/collections/mystic-towels

Password is magic

These are the pages with titles I’d like to try to reduce (pages I added to main menu):

https://mystichairwear.myshopify.com/pages/how-to-plop-your-hair-with-a-mystic-towel

https://mystichairwear.myshopify.com/pages/how-to-switch-the-twist-on-your-mystic-headband

Thank you!

1 Like
4

HI @mystichairwear ,

Sorry about that. To be honest I do not understand which images you want to decrease in size.

If you meant this one here:

made4Uo_0-1659060149067.png
made4Uo_0-1659060149067.png1709×910 252 KB

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the base.css
  3. Paste the codes below at the very bottom of the file.

To reduce the image size:

.page-width.no-heading.section-template--15768947589269__collage-0-padding {
    transform: scale(0.7);
}

To reduce both page title:

h1.main-page-title.page-title.h0 {
    font-size: 4rem;
}
5

That worked for the titles! Thank you!! I don’t think the picture changed but maybe it is the way my pics are fitting into the available space. Here is another page- maybe this example will show better. I think some of my images are more of a landscape shape whereas they should be a portrait shape, if that makes sense. So the sides are getting cut off.

https://mystichairwear.myshopify.com/collections/organic-cotton-headbands

1 Like
6

@mystichairwear ,

I see you fix it already. Yes, the image adjust to the container

7

I’m sorry to bug you- I still can’t figure out how to get my pictures to adjust accordingly on the collection page. I found the setting for product pictures but not for the picture on the collection page. My picture there is still not working. Can you help with that one? These are the two pages where the pictures are not displaying correctly (if they could adjust to the container as they do on product pages, that would be fantastic- I just can’t find that setting):

https://mystichairwear.myshopify.com/collections/reversible-headbands

https://mystichairwear.myshopify.com/collections/twist-headbands

Thank you!