Changing size of thumbnails of summary blocks on mobile

Site URL: http://www.wearehkers.com

Hello,

(This issue is on my template preview site that's not live yet, so I'm not sure what hyperlink I should be sharing, let me know how to share this particular page in the particular template preview)

I'm trying to make the thumbnails of the summary blocks take up 50% of the screen space on mobile screen. I've set it to 50% on site styles so it is 50% on desktop and tablet, but on mobile, some reason it's been overridden to 35% (see bottom right in the "inspect element" section... I've even tried to code it in to the css but it's not changing. I've included the code I used below. I'm not sure why it's being overriden because the style attribute in the styles window says 50% but has it crossed out... I've tried coding the summary block text to 50% too but the same happens, it's overridden to 65% even when I've coded it to 50%... Please can someone help, maybe my code is wrong...

Code I used:

@media screen and (max-width:700px) {
.summary-thumbnail .img-wrapper {
  overflow: visible !Important;
}
.sqs-block-summary-v2 .summary-thumbail-outer-container {
  width: 50% !Important;
  height: auto !Important;
}
.sqs-gallery-meta-container {
  width: 50% !Important;
}
}