Adjusting svg fill full width
Hi,
Am trying to design a layout for mobile resolution . The svg I tried doesn't fit to the entire width.
Brief:
CSS:
For desktop
.askingPrice_img {
width: 100%;
max-width: 231px;
height: auto;
background-image: url(../../../assets/img/dashboard/img_SetAskingPrice.svg);
background-repeat: no-repeat;
background-size: contain;
} for mobile : @media only screen and (max-device-width: 361px) { .platform-askingprice-banner { max-width: 336px; max-height: 385px; flex-direction: column; } .askingPrice_img { width: 100%; min-width: 336px; min-height: 203px; } } <div class="parent"> <div class="askingPrice_img "></div> <div class="askingPrice_content"></div> </div>
} for mobile : @media only screen and (max-device-width: 361px) { .platform-askingprice-banner { max-width: 336px; max-height: 385px; flex-direction: column; } .askingPrice_img { width: 100%; min-width: 336px; min-height: 203px; } } <div class="parent"> <div class="askingPrice_img "></div> <div class="askingPrice_content"></div> </div>
2 Replies
Difficult to say without a live example.
Maybe because of
- background-size: contain makes it so that the image won't grow beyond the size of the container. if the height is reached, it won't fill the width.
- max-width on .askingPrice_img is not overwritten in the media query
Otherwise consider to make a codepen so we can dive into it a little deeper. (just the part that matters)
Solved by changing the svg