Gossamer Forum
Home : Products : Gossamer Links : Discussions :

Responsive design for category columns?

Quote Reply
Responsive design for category columns?
I'm trying to get subcategory.html display as 1 column on mobile and 3 columns on desktop.

I guess the css part of this can be done with media calls based on screen width, but I can't figure out how to set category_cols = 1 for mobile and categorycols = 3 for desktop.

Brewt's post contains the following code to add to category.html, which looks as though it might be something like needed, but it's based on categories rather than screen width:

Code:
<%if category_id = 123 or category_id = 432%>
<%set category_cols = 1%>
<style type="text/css">
#category dl {
width: 100%;
}
</style>
<%endif%>

I'm also running static, not dynamic. I'm wondering if it's possible to generate two versions of the category links (1 column version and 3 column version), and then hide whichever one is not required by css.

I wonder if anyone has done something like this.

Thanks,
--Jo
Quote Reply
Re: [iplay] Responsive design for category columns? In reply to
Hi,

You would be better doing it based on a responsive class - something like:

Code:
@media (max-width: 768px) {
#category dl {
width: 100%;
}
}

I have not checked to see if thats the correct code, but the logic should work fine for you :)

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] Responsive design for category columns? In reply to
Thanks. Don't I have to define caregory_cols two ways? It's currently defined in globals as 3

Thanks,
--Jo
Quote Reply
Re: [iplay] Responsive design for category columns? In reply to
Its hard to know, without looking at how you run your sites design. Generally, you would want to be responsive to the window size - check out how my site works:

http://www.ultranerds.co.uk/ (try resizing your browser window)

Thats all the same design - but you do different things, based on the width of the page (using queries like the above one I gave you). So really, you shouldn't need to change anything around the <%caregory_cols%> (especially if you are using static pages, as it won't make a difference)

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] Responsive design for category columns? In reply to
Thanks Andy. I've just got back to my computer and tried the css that you suggested and can confirm that it does seem to work. At least it's working while viewing the pages in dynamic as I don't want to build them until development is finished. Ultimately, they would all be running static.

But I'm very puzzled by the catergory_cols definition in globals. I thought that was an essential part of the system. Does it mean I can delete the category_cols global all together? Does it not perform any function at all now?

Thanks as alwaysSmile

Cheers,
Jo
Quote Reply
Re: [iplay] Responsive design for category columns? In reply to
Hi,

Glad it worked :)

I would leave that global alone - it'll be used in home.html / category.html, with the "split" function (that works out where to "split" the rows at)

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] Responsive design for category columns? In reply to
OK, got it thanksWink

One more (only slightly associated) question.

Regardless of the number of columns (whether it's one column or two or three), is it possible to introduce a line space after specific categories?

So that, for example, instead of appearing like this...

Plants
Sports
Structures
Time
Transport
Weather
American
Australian
British
Quizzes


they would appear like this (with a space after Weather and after British)...


Plants
Sports
Structures
Time
Transport
Weather


American
Australian
British


Quizzes




--
Cheers,
Jo
Quote Reply
Re: [iplay] Responsive design for category columns? In reply to
You could probably just do:

Code:
<%if ID == 1234 or ID = 2345%>
<br>
<%endif%>

?

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] Responsive design for category columns? In reply to
OK, I'll try that thanksCool

I now have category_cols set at 4

and the css for desktop is...

#category dl {
width: 25%;
float: left;
}


and for mobile is...



#category dl {
width: 100%;
float: left;
}

That works fine giving four columns on desktop and one column on mobile.

Slight snag is that the single-column list of categories on mobile gets broken up with line spaces presumably caused by category_cols being set at 4. It doesn't look too bad but the apparently random spacing looks a bit illogical, as mocked up below:

Desktop

Code:
A F L Q
B H M R
C I N S
D J O T
E K P U

Mobile

Code:
A
B
C
D
E

F
G
H
I
J
K

L
M
N
O
P

Q
R
S
T
U

Can you see any way to stop category_cols interfering with the single-column view?

Cheers,
Jo






Quote Reply
Re: [iplay] Responsive design for category columns? In reply to
SORRY! Looks like that float:left was causing the trouble. I've removed it and the single column list now has no line breaks. And the four-column view seems ok too. Does that make sense? Not sure where that float came from in the first placeWink

Thanks,
--Jo
Quote Reply
Re: [iplay] Responsive design for category columns? In reply to
Spoke too soon. I find that with mobile css at 50% width to create 2 columns, it does need the float:left (DUH, of course) - but then the list has apparently random line breaks (because category_cols is set to 4 for the desktop view).
Code:
#category dl { width: 50%; float: left; }


So back to my original question...

Can you see any way to stop category_cols interfering with the single-column view?

Crazy

Thanks,
--Jo

Last edited by:

iplay: Dec 17, 2014, 10:14 AM
Quote Reply
Re: [iplay] Responsive design for category columns? In reply to
Hi,

Can you PM me an example page where I can see this happening? Bit hard to know based on just some pasted text :) (would need to play around with the CSS a bit in Firebug)

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] Responsive design for category columns? In reply to
Done! ThanksWink