Is there a way to resize a picture for fitting a block of a pop-up window in Wordpress?

Beatriz Almeida 0
Viewed 18

I would like to require your help because I'm building a new website in WordPress and I bought an existing theme (Ciya Shop), but when I try to modify the pop-up (in woo commerce option) I have to do it through coding. To be more specific about the issue, I want to change the picture that appears as default but when I try to do it, the new image never corresponds to the right dimensions of the frame and when I change the sizes, its quality is affected. I will leave the original code here:

<div class="row align-items-center">
<div class="promo-image col-sm-6">
<div class="vc_column-inner ">
<figure><img class="alignnone size-full wp-image-39396" src="https:...." alt="" width="2240" height="1260" /></figure>
</div>
</div>
<div class="promo-content col">
<div class="promo-popup-info">
<h5>Hello User</h5>
<h4 class="heading">Join Our Newsletter</h4>
Subscribe to the CiyaShop mailing list to receive updates on new arrivals, special offers and other discount information.

[pgscore_newsletter mailchimp_id="demo_test" mailchimp_api_key="demo_test"]

</div>
</div>

Thank you for your help!

image-size wordpress-shortcode wordpress css
1 Answers

You can simply do the resizing by CSS. Your picture's class is .promo-image as we can see in the html code you shared. What you need to do is to use height and width rulers.

example;

.promo-image{
height:500px;
width:100%;
}

or

.promo-image{
height:20%;
width:100px;
}

or

.promo-image{
height:70px;
width:200px;
}

also when you resize a picture with this method you should also change the size of the picture in the mobile version since this wont be a responsive image sizing. and you can achieve this simply adding this the beginning of the same code.

@media (min-width: 300px) and (max-width: 479px){
.promo-image{
 height:70px;
 width:200px;
}
}

If you have any questions please ask.

Selcuk xD0
Related