Align child images under main image

  • Posts: 30
  • Thank you received: 3
  • Hikashop Business
2 weeks 21 hours ago #321511

-- HikaShop version -- : 4.3.0
-- Joomla version -- : 3.9.19
-- PHP version -- : 7.4
-- Browser(s) name and version -- : various
-- Error-message(debug-mod must be tuned on) -- : none

Hi,

Tried to align the images under the main image in the product I shared.
With CSS i can change the width, but I cannot get the images to display properly under the main image.

What am I missing?

See attachments 'current situation' and ' desired situation'

Attachments:

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

  • Posts: 2591
  • Thank you received: 341
  • MODERATOR
2 weeks 11 hours ago #321520

Hello,

Without the url link we can just make a guess, but here, there is a good chance that it's a display command question.
Let's explain myself through example :
// Html code :

<span class="example">1</span>
span class="example">2</span>
span class="example">3</span>

// CSS command
span.example {
    display : inline; 
}
Result :
1 2 3

// Html code :
<span class="example">1</span>
span class="example">2</span>
span class="example">3</span>

// CSS command
span.example {
    display : block; 
}
Result :
1
2
3

The display in block will give to your element the property to take 100% of the possible width.

So, switch display: block; for inline or if needed inline-block, the latter is a fact a compromise of the 2 states.
Regards

Last edit: 2 weeks 19 hours ago by Philip.

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

  • Posts: 30
  • Thank you received: 3
  • Hikashop Business
2 weeks 36 minutes ago #321555

Oh lol I was in the underestimation you could see the hidden urls:
kaldiboz.nl/shop/machines/jura-voor-thuis/jura-a1

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

  • Posts: 2591
  • Thank you received: 341
  • MODERATOR
1 week 6 days ago #321556

Hello,

Thanks for your Url, this will allow to verify my theory, your frontend template around line 56 you can see this :

img {
    display: block;
    max-width: 100%;
    height: auto;
}
The most efficient will be to add your own Css command for define this images only in display inline.
Note : Have a look on this tutorial to learn how to proceed.

In details, to be sure to create a good custom css command just for the required context, built a good selector following this scheme :
.page_html_class .context_html_class img {
display: inline;
}

A good selector like this have 2 advantages, it limits his action where you need it, and it increase your custom css priority.
Hope this will help you to achieved what you needs.
Regards

Last edit: 2 weeks 9 minutes ago by Philip.
The following user(s) said Thank You: Robby

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

Time to create page: 0.063 seconds
Powered by Kunena Forum