This question refers to a single block of code to be placed in something like the define_main_page.php.
I'm just not getting my head wrapped around what layout and CSS coding will allow me to do what I want. Maybe I've just looked at it for too long. Maybe trying to work from three-column when I only need two...
What I am trying to create is like the example at https://css-tricks.com/snippets/css/...x/#aa-examples but with no Aside 2
Scroll down to
Let’s try something even better by playing with flex items flexibility! What about a mobile-first 3-columns layout with full-width header and footer. And independent from source order.
]
and the CSS coding starting with
Code:
.wrapper { display: flex;
flex-flow: row wrap;
}
/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
flex: 1 100%;
}
Scrolling on down, you'll see the image of the code done with a Header, Aside 1, Main (blue background), Aside 2, and Footer.
My desired layout for desktop and portrait mobile/tablet is to have:
Header - width 100%
Aside 1 - width 40% then Main - width 60%
Aside 2 - width 30% then Main2 - width 70%
Footer - width 100%
For mobile
Header
Aside 1
Main 1
Aside 2
Main 2
Footer
Aside 1 is destined to be a slider/carousel (don't know which yet but open to suggestions for this scenario)
If someone could munge the CSS on that page to work with two- versus three-column I would appreciate it.
THANX in advance
Bookmarks