Post by antmagn » Thu May 15, 2025 9:19 pm

Hello, I want to make the additional images shown under the main image to display at the center of the screen instead on the left in mobile view. I tried to play with display and float options in css .image-additional but couldn't make it work....
Thank you in advance

Version 3.0.3.8
default theme
PHP: 7.3.13

Attachments

???
additional.JPG
center additional images
Last edited by antmagn on Sat May 24, 2025 3:29 pm, edited 1 time in total.

New member

Posts

Joined
Fri Jul 23, 2021 8:38 pm

Post by paulfeakins » Thu May 15, 2025 10:04 pm

antmagn wrote:
Thu May 15, 2025 9:19 pm
Version 3.0.3.8
default theme
PHP: 7.3.13
But I can see from the screenshot you're not using the default theme ...

UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk


User avatar
Legendary Member
Online

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - London Gatwick, United Kingdom

Post by antmagn » Thu May 15, 2025 10:28 pm

It's default theme, I have altered the CSS and the breadcrumb on top.
Do you think that additional images section was center by default and I altered it accidentally :choke: ?

New member

Posts

Joined
Fri Jul 23, 2021 8:38 pm

Post by JNeuhoff » Thu May 15, 2025 10:30 pm

This can be easily done with your theme's stylesheet.css. But first you have to provide proper details, see forum rules. Also what's your website URL?

Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig


User avatar
Guru Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by antmagn » Thu May 15, 2025 11:31 pm

JNeuhoff wrote:
Thu May 15, 2025 10:30 pm
This can be easily done with your theme's stylesheet.css. But first you have to provide proper details, see forum rules. Also what's your website URL?
https://tonias-handmade.com

New member

Posts

Joined
Fri Jul 23, 2021 8:38 pm

Post by khnaz35 » Thu May 15, 2025 11:51 pm

Some thing like this?

Code: Select all

@media (max-width: 768px) {
  .image-additional {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    margin: 0 auto;
    float: none !important;
  }

  .image-additional a {
    margin: 5px;
  }
}
Don't forget to refresh your theme cache and modifications.

Got an urgent question that’s keeping you up at night? There might just be a magical inbox ready to help: khnaz35@gmail.com
Enjoy nature ;) :) :-*


User avatar
Active Member

Posts

Joined
Mon Aug 27, 2018 11:30 pm
Location - Malaysia

Post by antmagn » Fri May 16, 2025 12:19 am

khnaz35 wrote:
Thu May 15, 2025 11:51 pm
Some thing like this?

Code: Select all

@media (max-width: 768px) {
  .image-additional {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    margin: 0 auto;
    float: none !important;
  }

  .image-additional a {
    margin: 5px;
  }
}
Don't forget to refresh your theme cache and modifications.
Thank but that made the thumbnails go in a row :-\

Attachments

additional2.JPG

thumb-row - additional2.JPG (9.93 KiB) Viewed 6939 times


New member

Posts

Joined
Fri Jul 23, 2021 8:38 pm

Post by khnaz35 » Fri May 16, 2025 1:52 am

I am seeing it like this on mobile.
Isn't this was ask?

Attachments

???
Screenshot_20250516_005120_Samsung Internet.jpg

Got an urgent question that’s keeping you up at night? There might just be a magical inbox ready to help: khnaz35@gmail.com
Enjoy nature ;) :) :-*


User avatar
Active Member

Posts

Joined
Mon Aug 27, 2018 11:30 pm
Location - Malaysia

Post by antmagn » Fri May 16, 2025 3:26 am

khnaz35 wrote:
Fri May 16, 2025 1:52 am
I am seeing it like this on mobile.
Isn't this was ask?
Sorry I removed the modification that you advised because it was not look alright and didn't want to leave it like this. It is still aligned at the left.

New member

Posts

Joined
Fri Jul 23, 2021 8:38 pm

Post by paulfeakins » Fri May 16, 2025 7:58 pm

antmagn wrote:
Thu May 15, 2025 10:28 pm
It's default theme, I have altered the CSS and the breadcrumb on top.
Once you have modified it, it is not the default theme anymore, even if it still has that name.

I suggest you leave the extra images as they are - they look good left aligned.

UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk


User avatar
Legendary Member
Online

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - London Gatwick, United Kingdom

Post by antmagn » Sat May 24, 2025 3:28 pm

this css alternation worked if anyone interested, so I will mark the post as SOLVED, thank you guys!

Code: Select all

@media (max-width: 767px) {
    .thumbnails {
        overflow: auto;
        clear: both;
        list-style: none;
        padding: 0;
        margin-bottom: -40px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

Attachments

???
CaptureThumbs.JPG
center

New member

Posts

Joined
Fri Jul 23, 2021 8:38 pm
Who is online

Users browsing this forum: Bing [Bot] and 31 guests