Mobile View - Optimizing Block Sizes (Fixity Price / Repair Time)

  • Posts: 18
  • Thank you received: 3
3 weeks 5 days ago #367444

-- url of the page with the problem -- : fixity.hu
-- HikaShop version -- : 513
-- Joomla version -- : 4,4,10
-- PHP version -- : 8

Hello everyone,

I'm working on a Hikashop-powered website, and I'm encountering an issue with the mobile display on product pages. Specifically, on the Samsung A54 5G Akkumulátor page, I have two custom blocks displaying 'Fixity Price' and 'Repair Time' information. In mobile view, these blocks (and their surrounding frames) appear disproportionately large, negatively impacting readability and aesthetics.



My question is as follows:

How can I reduce the outer frame, size, and internal padding/margin values of these blocks (or the elements containing them) on mobile, to make them much more compact?

What I suspect or have tried so far:

I believe CSS modification will be necessary, but I'm unsure which CSS file and which selectors I should override.
It might involve playing with Hikashop's built-in layout override options.
The goal is to use mobile-specific CSS (media queries).
Please, could you help me resolve this issue? Perhaps you could provide specific CSS code snippets or guidance on which files and class/ID names to look for?

Thank you in advance for your help!
Urmos

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 84024
  • Thank you received: 13613
  • MODERATOR
3 weeks 5 days ago #367445

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;
  }
}

Please Log in or Create an account to join the conversation.

  • Posts: 18
  • Thank you received: 3
3 weeks 5 days ago #367448

For the forum (general thank you)

Subject: RE: Mobile View - Optimizing Block Sizes (Fixity Price / Repair Time) - SOLVED!

"Hi nicolas,

I just wanted to say a huge thank you for your invaluable help with the mobile view optimization issue.

The provided CSS code, especially the media query for the padding, min-height, width, and margin properties within the .hkc-md-6.hikashop_product_ar .price and .hkc-md-6.hikashop_product_javitasi_ido selectors, worked perfectly!

The blocks now display much more compactly and appropriately on mobile devices, greatly improving the user experience.

Your detailed explanation and targeted CSS were exactly what I needed.

Thanks again for the excellent support!

Best regards,

The following user(s) said Thank You: nicolas

Please Log in or Create an account to join the conversation.

Time to create page: 0.071 seconds
Powered by Kunena Forum