put several images/logos in 2 or 3 columns in mobile view sqs 7.1

Site URL: https://rectangle-raspberry-bekp.squarespace.com/config/design/custom-css#novelone%23novelone

Hello everyone,

I am tired of searching the internet to find a way to change this one column view (many images  of logos with links) to have two or three columns next to one another. I have the scroll down a long list to show all vendors so i need to show them in multiple columns or rows .

Can anyone help please?

Could you please set your site visibility to password protected and share the URL along with the password so that we can view your website? It is much too difficult to shoot CSS codes out blindly 🙂

hello, thank you very much for replying... well, how can i do that? to make my site visible with pass?

sorry i have no idea

To change your site’s availability:

1. In the Home menu, click Settings.
2. Click Site Availability.
3. Select Public, Password Protected, or Private.
4. Click Save.

ok one sec. i will do that😀

please see, the mobile view for the ebooks page, the vendors are a looooong list! can i make them in two columns or three?

https://rectangle-raspberry-bekp.squarespace.com/config/pages

pass: thankyou

On 10/29/2021 at 4:52 AM, Luethi said:

please see, the mobile view for the ebooks page, the vendors are a looooong list! can i make them in two columns or three?

 

https://rectangle-raspberry-bekp.squarespace.com/config/pages

pass: thankyou

 

Your site is private. Can you setup password & share url again? We can check easier

hello tuanphan, thank you for replying.

password is thank you. the link is the same as above. waiting for your reply.

On 11/1/2021 at 4:52 PM, Luethi said:

hello tuanphan, thank you for replying.

password is thank you. the link is the same as above. waiting for your reply.

https://rectangle-raspberry-bekp.squarespace.com/ebooks?noredirect

Add to Design > Custom CSS

/* Mobile-Ebooks page */
@media screen and (max-width:767px) {
div#page-section-617a6ad1df1e030c67b683e5 .span-9 .span-2>div {
    width: 33.3333% !important;
    float: left !important;
    clear: none !important;
}
div#page-section-617a8f4b4dee571eb42bbbc7 .span-9 .span-2>div {
    width: 40% !important;
    float: left !important;
    clear: none !important;
}
}