2 or more columns on a row - Support | Kriesi.at

Tagged: columns, mobile versione, rows

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
October 4, 2024 at 5:24 pm #1468442

sitibus
Participant

hello on the site https://www.studiolegalepsicologico.it/supporto-legale-psicologico/ I would like the 10 images after the title “settori di attività” to be seen in rows of two columns only on the mobile version is it possible?
thanks gianluca

October 4, 2024 at 6:09 pm #1468446

Guenni007
Participant

can you please exclude the text-block with the heading to an extra section before that section with all those “Settori”
by the way – why don’t you use for a heading a heading element instead of putting the heading inside a text-block element?

after that – we can handle the whole container as a flex container
no need for a second color-section handling the other layouts for responsive design.

October 5, 2024 at 10:06 am #1468458

Guenni007
Participant

If you have looked at my suggestion, I will remove your pictures.
the ID is only for a anchor navigation if you like

https://webers-testseite.de/giulia/

October 5, 2024 at 10:45 am #1468462

sitibus
Participant

hi and thanks for your help I should have done exactly as you told me but I always see the same on mobile while I would like more columns on the same row otherwise the scrolling is infinite

October 5, 2024 at 11:06 am #1468468

Rikard
Keymaster

Hi,

Thanks for helping out @guenni007 :-)

Best regards,
Rikard

October 5, 2024 at 8:13 pm #1468484
Guenni007
Participant
look to the layout image again – the color-section with your columns should have the custom-class : settore-attivita
you gave to it an ID : settore-attivita

If you like to have only 2 columns beside – even on mobile phone just get rid of last media query rules:
```
@media only screen and (max-width: 549px) {
  #top .settore-attivita .entry-content-wrapper .flex_column {
    flex: 1 1 100%;
  }
}
```
October 5, 2024 at 8:41 pm #1468485

Mike
Moderator

Hi,
Thanks for your solution Guenni007, when I follow it seems to works good:

Best regards,
Mike

October 5, 2024 at 9:49 pm #1468486

sitibus
Participant

Thanks but I did exactly as you told me:
#top .settore-attivita .entry-content-wrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}

#top .settore-attivita .entry-content-wrapper:before,
#top .settore-attivita .entry-content-wrapper:after {
display: none !important;
}

#top .settore-attivita .entry-content-wrapper .flex_column {
flex: 0 1 19%;
width: unset !important;
margin: 0px;
}

@media only screen and (max-width: 989px) {
#top .settore-attivita .entry-content-wrapper .flex_column {
flex: 0 1 30%;
}
}

@media only screen and (max-width: 767px) {
#top .settore-attivita .entry-content-wrapper .flex_column {
flex: 0 1 48%;
}
}

@media only screen and (max-width: 549px) {
#top .settore-attivita .entry-content-wrapper .flex_column {
flex: 1 1 100%;
}
}

But on mobile phone I still see one column for each row

October 5, 2024 at 10:23 pm #1468487
Guenni007
Participant
Thanks but I did exactly as you told me:

no you did not !

look to the layout image again – the color-section with your columns should have the custom-class : settore-attivita
you gave to it an ID : settore-attivita

An ID is not a class

Why i choose for it a class:
An ID had to be unique on the page.
If you like to use it on that page again for a different section – you can use that class again. An ID not
- This reply was modified 1 hour, 33 minutes ago by Guenni007.
October 5, 2024 at 10:27 pm #1468489
Guenni007
Participant
if you want it 5 columns on desktop and on mobile always 2 column:
```
#top .settore-attivita .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#top .settore-attivita .entry-content-wrapper:before,
#top .settore-attivita .entry-content-wrapper:after {
  display: none !important;
}

#top .settore-attivita .entry-content-wrapper .flex_column {
  flex: 0 1 19%;
  width: unset !important;
  margin: 0px;
}

@media only screen and (max-width: 767px) {
  #top .settore-attivita .entry-content-wrapper .flex_column {
    flex: 0 1 48%;
  }
}
}
```
you see how it works ?
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.