Hi,
If you look at these elements with your browser's inspector tools, you should be able to find the CSS code already applied to them and where that CSS code comes from.
In the file
fixity.hu/templates/sj_agenz/css/custom.css
you've added these CSS codes in order to add padding around these areas on desktop:
.hkc-md-6.hikashop_product_ar .price,.hkc-md-6.hikashop_product_javitasi_ido {
font-size: 26px;
padding: 20px;
border: 1px solid #cecece;
position: relative;
min-height: 200px;
display: block
}
and:
.hkc-md-6.hikashop_product_javitasi_ido {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
line-height: 60px;
}
So as it is a "custom.css" file, it seems to be added on your end and thus, you should be familiar with it.
The problem on mobile comes from the min-height and padding of the first CSS, and the line-height of the second as well as the br tag in the HTML of the second area.
So, to reduce the size of these 2 areas on mobile, you'll have to add CSS code with a media query targeting these and placed at the end of the CSS in that file.
You can see that the switch between the mobile and desktop happens at 992px on your website.
So, you can target devices smaller than this like this:
@media only screen and (max-width : 990px) {
.hkc-md-6.hikashop_product_ar .price,.hkc-md-6.hikashop_product_javitasi_ido {
padding: 0px;
min-height: 0px;
}
.hkc-md-6.hikashop_product_javitasi_ido {
line-height: 30px;
}
.hkc-md-6.hikashop_product_javitasi_ido br{
display:none;
}
}