Product Vendor Misalignment on Mobile (Dawn theme)

[ypcollective]

As we can see in the image, the product title " Chrome Hearts" is misaligned with each other on MOBILE only and I would like them to be on the same line. this is happening on the homepage only and I would appreciate any help. The website link is Young Professionals Collective (ypcollective.com). TIA

[EBOOST · Accepted solution]

Hi @ypcollective ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Layout/theme.liquid
3. Add code below to end of file ( refer screenshot)

{%  if request.page_type == 'index' %}
      <style>
        @media(max-width: 480px){
        	#MainContent section .grid.product-grid .card-wrapper.product-card-wrapper .card__inner  .card__content {
        		display: none!important;
        	}
        	#MainContent section .grid.product-grid .card-wrapper.product-card-wrapper .card__inner .card__media .media img{
        		height: 100%!important;
        		top: 0!important;
        	}
        }
      </style>
    {%  endif %}

[EBOOST · Accepted solution]

Hi @ypcollective ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Layout/theme.liquid
3. Add code below to end of file ( refer screenshot)

{%  if request.page_type == 'index' %}
      <style>
        @media(max-width: 480px){
        	#MainContent section .grid.product-grid .card-wrapper.product-card-wrapper .card__inner  .card__content {
        		display: none!important;
        	}
        	#MainContent section .grid.product-grid .card-wrapper.product-card-wrapper .card__inner .card__media .media img{
        		height: 100%!important;
        		top: 0!important;
        	}
        }
      </style>
    {%  endif %}

[ypcollective]

Thank you so much, id like to follow up by asking if its possible to also have the prices be aligned ?

[EBOOST · Accepted solution]

Hi,

You can try to add code below to end of Layout/theme.liquid ( before </body> tag)

<style>
  #MainContent section .grid.product-grid .card:not(.ratio) > .card__content,
  #MainContent section .grid.product-grid .card__information {
    height: 100%;
  }
  #MainContent section .grid.product-grid .card__information .card-information,
  #MainContent section .grid.product-grid .card__information {
    display: flex;
    flex-flow: column;
  }
  #MainContent section .grid.product-grid .card__information .card-information {
    height: 100%;
  }
  #MainContent section .grid.product-grid .card__information .card-information .price {
    margin-top: auto;
  }
</style>