Responsive Product Page Sale

Community feedback

• 

  Brian Schooler•440

  @superschooler

  Posted almost 3 years ago

  Hi Albert,

  Building on what @ayushdotdev suggested, if you simply add .card-img { width: 50% }, the card would only be 25% the width of the container since you have it wrapped in another div. You should be able to get rid of the div sandwiched between .card and .card-img since it only holds one item (.card-img).

  Additionally, to make it responsive on a mobile device, you can try the following:

  @media (max-width: 550px) {
  	.card {
  		flex-direction: column;
  		height: auto;
  		margin: 24px;
  	}
  
  	.card-img {
  		object-fit: cover; /* Or Change to Smaller Image */
  		border-radius: 3% 3% 0 0;
  		height: 300px;
  	}
  
  	.card-text {
  		width: 100%;
  		height: auto;
  		padding-bottom: 24px;
  	}
  }
  

  This is a pretty simple solution that doesn't quite make it perfect, but is a great start! Nice work on your project 👍

  12

  Marked as helpful
• 

  ayushdotdev•50

  @ayushdotdev

  Posted almost 3 years ago

  Hi Albert, by giving "card-img" class a width of 50% and "card-text" container class width of 50% that will make both separated halves equal

  this fix will make it look much similar

  01

  Marked as helpful