Products page tweaks

[micheal_w]

Hi Team

Can you please help to put me in the right direction:
(see link above)

1. The thumbnails are on the left side by default. Would it be possible to put them underneath the main pic under 1200px?
2. I have a text section underneath a row/background picture. That text section has a top pointed arrow placed in the middle (see attachment image1), it works perfectly on tablets. However as soon as the page is opened on screens under 767px, that arrow jumps up a bit from its correct place (image2). Do you have any recommendation how to keep it at the correct place?

Thanks!
M.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

1) That would not be possible within the scope of support, it would require complex changes.

2) You can simply position it differently using a media query.

@media only screen and (max-width: 767px)
.spb_image.square-corners figure img {
    position: absolute;
    top: 20px;
    left: 45%;
    max-width: 44px;
}
}

[micheal_w]

Hi David,

1) Do you know what is interesting? That my request is actually can be reproduced on the site.
See screen recording: If I open the page on wide screen and make it smaller and smaller, the thumbnails are staying on the left.
https://www.dropbox.com/s/4qem2zlnznexouz/thumbnails.mov?dl=0
However if I open the side on narrow screen (mobile size) and start to make it larger, the thumbnails stays on the bottom.

Wouldn’t it be possible to combine the two?
So above a certain screen size the thumbnails be on the left and below that size they go to the bottom.
Can it be done using some css as simple as it sounds?

2) Unfortunately the css didn’t solve the issue 🙁

[David Martin – Support]

1) Technically it’s always mostly possible, but the time it would take to implement is beyond the scope of support. It would also likely require JS adjustments.

2) Apologies, please amend to this, I missed an open bracket.

@media only screen and (max-width: 767px) {
.spb_image.square-corners figure img {
    position: absolute;
    top: 20px;
    left: 45%;
    max-width: 44px;
}
}

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

Great, glad to help you out where possible.

[micheal_w]

Hi David,

After one of the latest update, my little arrow (as shown above) has disappeared on mobiles…
Can you help to get it back please?

Thanks!

[Rui Guerreiro – SUPPORT]

Hi,

Can you can you change this code:

@media only screen and (max-width: 767px) {
.spb_image.square-corners figure img {
    position: absolute;
    top: 20px;
    left: 45%;
    max-width: 44px;
}
}

To this one.

@media only screen and (max-width: 767px) {
.spb_image.square-corners figure img {
    position: absolute;
    top: 0px;
    left: 45%;
    max-width: 44px;
}
}

-Rui