Responsive Product Page Sale

Community feedback

• 

  Brian Schooler•440

  @superschoolerPosted over 2 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 👍

  Marked as helpful

  1

  ---

  

  ayushdotdev•50

  @ayushdotdevPosted over 2 years ago

  @superschooler I actually cloned the site to see if the image card would be just 25% after adding width:50% to class "card-img" without removing parent div, I was shocked. Thanks mate this was really important

  1

  

  Albert Garcia•20

  @albertgarcia1324Posted over 2 years ago

  @superschooler thanks I will update when I get a chance

  0
• 

  ayushdotdev•50

  @ayushdotdevPosted over 2 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

  Marked as helpful

  0

  ---

  

  Albert Garcia•20

  @albertgarcia1324Posted over 2 years ago

  @ayushdotdev ok great I will update that when I get a chance. Thanks!

  1