PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Thu Oct 19, 2017 5:51 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 10 posts ] 
Author Message
PostPosted: Tue Aug 29, 2017 2:32 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
We have a page of company logos, and uses flex:1 so it has four across.
But on mobile I want it to be two across.

Is there a tweak to the CSS I can make to force it to be four across within the DIV?

Syntax: [ Download ] [ Hide ]
<div class='employers-flex'>
<div class='employers-logo'><img src='/images/logo-abk.jpg' alt='logo abk' /></div>
<div class='employers-logo'><img src='/images/logo-angloholt.jpg' alt='angloholt' /></div>
<div class='employers-logo'><img src='/images/logo-cambridgeshire.jpg' alt='cambridgeshire' /></div>
<div class='employers-logo'><img src='/images/logo-camden.jpg' alt='camden' /></div>
</div>

<div class='employers-flex'>
<div class='employers-logo'><img src='/images/logo-enfield.jpg' alt='enfield' /></div>
<div class='employers-logo'><img src='/images/logo-espo.jpg' alt='espo' /></div>
<div class='employers-logo'><img src='/images/logo-greenwich.jpg' alt='greenwich' /></div>
<div class='employers-logo'><img src='/images/logo-harrogate.jpg' alt='harrogate' /></div>
</div>

<div class='employers-flex'>

<div class='employers-logo'><img src='/images/logo-morgan.jpg' alt='morgan' /></div>
<div class='employers-logo'><img src='/images/logo-richmondshire.jpg' alt='richmondshire' /></div>
<div class='employers-logo'><img src='/images/logo-wandsworth.jpg' alt='wandsworth' /></div>
<div class='employers-logo'></div>
</div>

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Tue Aug 29, 2017 2:48 pm 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6573
Location: WA, USA
Sounds like your minimum widths aren't set up appropriately. You should be able to set those such that on desktop displays there's room for 4 and on mobile only room for 2.


Top
 Profile  
 
PostPosted: Tue Aug 29, 2017 2:58 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
How do I do that? All I know is display: flex, for the container. and Flex:1 for each div.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Wed Aug 30, 2017 1:23 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6573
Location: WA, USA
If you don't know any CSS then you shouldn't be messing around with this. Ask your web designer to do it.


Top
 Profile  
 
PostPosted: Wed Aug 30, 2017 1:46 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
I know it. Trust me I know a LOT of CSS. But Flex is still new to me.
Thanks for the 'nice' reply!

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Wed Aug 30, 2017 3:50 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6573
Location: WA, USA
Okay, then use your lots of CSS experience to set minimum widths on the logo things. If you need a refresher, it's "min-width". And while you're in there, breaking the logos into groups of four in the markup defeats half the purpose of flex. Put them all in the same flex container.

This is all going with the assumption that when you say you want 4/2 you actually need however-many per row that fits with everything else moving down. As in your standard inherently-responsive floating layout but with flex's benefit of resizing the child objects to fit each row. If you want literally 4 rows on desktop and 2 rows on mobile with no variation or fluidity then you need media queries and stricter layout rules, but we can cross that bridge if we come to it.

Example - un/comment the desktop and mobile body widths (which aren't rules you'd use in your actual CSS) to see the resizing.

If the example isn't compatible with your page layout then I need to know what your page layout is like.


Top
 Profile  
 
PostPosted: Wed Aug 30, 2017 4:22 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
I can see where you are going with this. I only learnt that display: flex, and flex: 1 will mean everything in the containing DIV will flex out evenly. That is why they are in individual containers. Not done the min-widths before.

So to make it work as I want, responsive, I need to put all the inner divs into one container. Set the container to be display: flex, and for desktop, the innerdivs to be a min-width of 33%, and for mobile, the innerdivs to be min-width of 45%?

Is that basically it?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Wed Aug 30, 2017 4:38 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
Got it.
Put them all in the one container DIV. And use this CSS:
It's the "wrap" but I needed, plus the min-width. Makes sense now.

Syntax: [ Download ] [ Hide ]
.employers-flex
{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.employers-logo
{
   min-width: 200px;
flex: 1;
margin-bottom: 30px;
}

.employers-logo img
{
max-width: 100%;
}

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Wed Aug 30, 2017 5:59 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6573
Location: WA, USA
A min-width with an absolute value (like 200px) is the key. A relative value (like 33% or 45%) would work too but then you'd have to specify one for mobile and desktop, which is what I'm trying to avoid doing. 200px means you don't need any device overrides.


Top
 Profile  
 
PostPosted: Wed Aug 30, 2017 6:08 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
We do have one for mobile and one for desktop, so on Desktop it is 3 across, and on mobile it is two across.
If it was fully 'stretchy' responsive, it would have to be percentages. With one perhaps for smaller tablets too.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 10 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group