-
Posts
-
I am building a new website with 4 widgets in the footer. On an iPad portrait · width 768px all 4 widgets are displayed next to each other. The widgets are to small to my taste, so I would like to display the 4 widgets under each other just like on a small mobile screen.
How can I do this?
Thanks,
Alwini prefer to have first 2 / 2 columns – then in a row – please try in your quick css:
i do not see private content area so you had to play with that min-width value yourself:@media only screen and (min-width:620px) and (max-width: 989px) { #top #footer .container { display: flex !important; flex-flow: row wrap; justify-content: space-between; } #top #footer .container:before, #top #footer .container:after { display: none } #top #footer .container .flex_column { flex: 0 1 45%; margin: 0px !important; width: unset !important } }Hello Guenni007,
Thank you very much, that is even better like this (first switch 2 columns, then to 1 column!)
To be sure that I understand your code: every screen width between 620px and 989px is displaying the 4 footer widgets in 2 columns, correct? When the width is less then 620px there is 1 column and above 989px 4 columns?
One other question that is related with this: I also use a Grid Row with 4 Cells. This Row also switch from 4 rows to just 1 row at once. I would very much like to do the same thing with this Grid Row as with my footer widgets; so let it switch to 2 rows first and then on really small screens to 1 row.
Can you give me a code for that too?
Thank you very much :)
Alwinyes – thats it – there is a good article about flexbox model on: css-tricks
At the core, it is based on declaring a parent container as a flex container. The direct child elements are then the Flex items. These can be assigned various properties. First of all, it is determined at the parent element whether they lie in a row or in a column, whether they wrap when there is a lack of space or not.
Unfortunately, all direct child elements participate in this procedure – even pseudocontainers, for example – which is why I removed them from the footer via display: none.
What you have to learn a little bit then are the shortcuts to the individual properties. So in the flex-flow the definition for column/row and wrap/no wrap is united (besides even how to wrap).
flex on the other hand combines the properties of the items: may grow, may shrink, width of the items.
etc. etc.For a gridrow – i recommend to give the gridrow element itself a custom class – that you can decide if or if not behave like that.
in my case on my test page it is: grid421
See: https://webers-testseite.de/alwin-gridrow/.av-layout-grid-container.grid421 { display: flex; flex-flow: row wrap; justify-content: space-between; } .av-layout-grid-container.grid421 .flex_cell { flex: 0 1 25%; width: unset !important } @media only screen and (min-width: 768px) and (max-width: 989px) { .av-layout-grid-container.grid421 .flex_cell { flex: 0 1 50%; } } @media only screen and (max-width: 767px) { .av-layout-grid-container.grid421 .flex_cell { flex: 1 1 100%; } }PS : there is a little bit of it included now in the columns. If you go to the column alb element and open the first column element in a row – there is on the first tab : Row Settings – Row Screenoptions : there it is if you choose “reverse order” – this will be the row-reverse option.
If you choose “Individually select positon …” you can set each column in that row what position it got when in responsive case.
that is the order value. LinkHello Guenni007,
Thank you for your help; I now have this code added to my custom css:/* grid responsive behavior */ .av-share-box .avia-related-tooltip { display: none !important; } .av-layout-grid-container.grid421 { display: flex; flex-flow: row wrap; justify-content: space-between; } .av-layout-grid-container.grid421 .flex_cell { flex: 0 1 25%; width: unset !important } @media only screen and (min-width: 620px) and (max-width: 1025px) { .av-layout-grid-container.grid421 .flex_cell { flex: 0 1 50%; } } @media only screen and (max-width: 620px) { .av-layout-grid-container.grid421 .flex_cell { flex: 1 1 100%; } } /* end grid responsive behavior */As you can see I played a bit with the pixel settings, so that even on small phone screens in landscape view I see 2 columns side by side, and also on a landscape iPad (1024px so set to 1025px). Also, I aligned it with the breakpoint for the footer (also 620px)
It is working fine now but I do have some questions.
At first, the code didn’t work until I made the following adjustments:
– In Grid Row>Settings I changed the Mobile Breaking Point from 989px or lower to 767px or lower.
– Also, in Developer Settings I had to set Custom CSS Class is grid421 in all 4 individual columns.Both adjustments were necessary for the code to work.
Is this expected behavior?Last question:
I want to use this responsive behavior of the grid rows throughout the website. Is it possible to just use one piece of css code for this instead of using css code per grid. So without the Custom CSS Class settings?Again, thank you very much for your help!! :)
Alwinyou do not need to set the custom class ! then all grid-rows were influenced.
Maybe it is necessary to add more selectors to those rules that they overwrite existing ones.
IDs on that will be very helpful – because they have more weight on that f.e.:to differ between the grid-rows with 5 or 6 etc cells you can add the class of them – f.e.:
#top .av-layout-grid-container { display: flex; flex-flow: row wrap; justify-content: space-between; } #top .av-layout-grid-container .flex_cell.av_one_fourth { flex: 0 1 25%; width: unset !important } @media only screen and (min-width: 768px) and (max-width: 989px) { #top .av-layout-grid-container .flex_cell.av_one_fourth { flex: 0 1 50%; } } @media only screen and (max-width: 767px) { #top .av-layout-grid-container .flex_cell.av_one_fourth { flex: 1 1 100%; } }to give better advice it would be helpful to know a link to your site. (Keep in mind though that I’m a participant like you, so I can’t see the private area).
btw: Be careful not to define overlapping areas. It is a good practice to use even numbers for min-width and odd numbers for max-width.
you have twice for 620pxHello Guenni007,
Thanks again! Your help is very much appreciated!
The last code you give me does work perfect :)
-Do you know why I have to set max width to 1050px to get 2 columns side by side on a landscape iPad? The iPad is 1024px so setting max width to 1025px would be enough I thought but it only seems to work with a 1050px setting like` this:
`@media only screen and (min-width: 768px) and (max-width: 1050px) {
#top .av-layout-grid-container .flex_cell.av_one_fourth {
flex: 0 1 50%;
}
}Alwin
Hi,
Thank you for the update.
Do you know why I have to set max width to 1050px to get 2 columns side by side on a landscape iPad?
It depends on the actual model of the iPad, its size and native screen resolution. Some iPads or tablets have larger screens and higher screen resolution, so you have to adjust css media query a bit in order to cover those devices. You can check the most common css media queries for iPad devices in the following link.
// https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Best regards,
IsmaelCan you guys help me one more time:
I have now build a page with a grid with 3 rows. I want these 3 rows to switch to 2 rows first (iPad/tablets) and then to 1 row on small mobile devices.
Which code to use for that?
Thanks a lot :)
Alwin
- The topic ‘Change responsive behavoir footer widgets?’ is closed to new replies.