help with alignment on collection pages (price and item title box)

Solved
Highlighted
Tourist
69 0 0

hi so there is a weird glitch where if the item is sold out the box is smaller and it messes up all the alignment on the collection pages, also if anyone knows how to change the box color to just white that would be rly helpful

my url: https://coming-era.myshopify.com/

 

Screen Shot 2020-07-15 at 9.02.18 PM.png

0 Likes
Highlighted
Tourist
10 2 3

This is an accepted solution.

You bet!

I'm assuming you're talking about the vertical alignment as seen here:

Screen Shot 2020-07-15 at 5.17.59 PM.png

 

 

 

 

 

Here's what you need to do (We're going to use CSS, aka Cascading Style Sheet, aka the code that changes the visual shit on the web, to fix this):

  1. Go to your Online Store section and click on Actions > Edit Code on the theme you're currently working on
  2. Then in the code section scroll down on the left hand side until you see the Assets folder, and create a new asset called coming-era.css
  3. Then in this CSS file we'll add a rule that targets the info section for the product card, in this case a class named card__info. Add this line of code to that file:

 

 .card__info { min-height: 104px; }

 

  •  What this does is it tells your browser "Hey dude, we need this element that has the card__info class to be a minimum height of 104px. That way since the sold out text is smaller vertically than the text that has a price, it doesn't matter since the minimum height is the same. If the text ends up being larger however, it will grow since it's just targeting the minimum height. (So if you change your font size bigger, you'll probably have to adjust this setting to make it bigger too.
  • Save that file.
  • Now we need to make sure that it gets included in your theme and used by the browser. So scroll up on the left and select your theme.liquid file.
  • In this file you'll have to do some searching to figure out where the other css files are included and add your custom one last. You can do this using the command or ctrl key and the f key. Aka CMD + F or CTRL + F to pull up a little search window. Type in css and it should highlight the lines where the other css files are included.
  • Now below those, create a new line and paste in the following:

 

{{ 'coming-era.css' | asset_url | stylesheet_tag }}

 

  • What this does is (it's using Shopify's liquid templating language by the way) is it grabs that file, it then gets the URL of that file, and pops that URL into the <link> HTML tag in order to link that stylesheet to the HTML document it generates.
  • And now save that file, and voila! It should be fixed!
  • And now come back this thread and let me know if that worked for you.

Cheers,

Mike

1 Like
Highlighted
Tourist
69 0 0

omg thank you so fking much rly appreciate it, im also having an issue with padding in between products, do you think you could help me out?

 

https://community.shopify.com/c/Shopify-Discussion/how-to-correct-padding-between-and-around-product...

 

i also just wanna say thank you so much for expaling everything so appreciative man ty sM!!!

0 Likes
Highlighted
Tourist
10 2 3

This is an accepted solution.

Ok! So give this a whirl (replace the line you added last time with the following)

.card__info { 
  min-height: 104px;
  background-color: #fff;
}

.grid__item {
  padding-left: 0;
}

.card__wrapper {
  margin-bottom: 0px;
}

@media only screen and (min-width: 750px) {
  .card__wrapper {
    margin-bottom: 20px;
  }
}

 

Try that out and let me know how it goes!

Cheers,

Mike 

0 Likes
Highlighted
Tourist
69 0 0

awesome now how can i make the text/ price boxes smaller vertically

0 Likes
Highlighted
Tourist
69 0 0

Screen Shot 2020-07-16 at 10.08.37 AM.png

 

 

 

 

i have an alignment issue again this one product moves down a little bit?

and how can i make the vertical padding go away? so theres none? how can make the text boxes padding on top and bottom be minimized.  and how can i make the product images take up all the page with no margins on either side?

0 Likes
Highlighted
Tourist
10 2 3

I'll be much easier to help you if I can access your site and make changes to that code file and see them update in real time. Can we continue this conversation directly (send me a message on here)?

 

Cheers,

Mike

1 Like