[Pro] Responsive Help

Freeway
1

Hi all,

Having some fun playing around with media queries and the like.

On my page I have four divs, each a different colour, set up display in a single row on a desktop. (4 x 1)

What I am trying to achieve is at the first break point it becomes 2 x 2 and then finally the next break point 1 x 4 (single column).

How can I achieve this?

Thanks,

Seb

http://www.tinyshark.co.uk/cssanimations3/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Sebastian,

Here is the code that Backdraft uses on the four-column module:

/*----------------------------------------*/
/* 928px breakpoint (netbook/iPad) */
@media screen and (max-width:928px) {

/* 4 column TRANSITION to 2x2 */
.four {
	width: 48.9% !important;
}
.fourMiddleLeft {
	float: right !important;
	margin-left: 0 !important;
}
.fourMiddleRight {
	clear: both !important;
	margin-top: 20px;
	margin-left: 0 !important;
}
.fourRight {
	float: right;
	margin-top: 20px;
	margin-left: 0 !important;
}
}

/*----------------------------------------*/
/* 480px breakpoint (mobile) */
@media screen and (max-width:480px) {

/* 4 Column TRANSITION to 1 column */
.fourLeft, .fourRight, .fourMiddleRight, .fourMiddleLeft {
	width: 100% !important;
	clear: both;
}
.fourMiddleLeft { margin-top: 20px; }
}

I have applied custom classes to the elements though Freeway’s extended interface that hook into the above CSS, like so:

.fourLeft .fourMiddleLeft .fourMiddleRight .fourRight

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hi Caleb,

Thanks for that. I’ve applied the css to the page and only one of the boxes is behaving as expected. The others are not expanding etc.

Do you know what the issue is. I suspect it’s how I am setting them within Freeway?

Seb

http://www.tinyshark.co.uk/cssanimations3/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Sebastian,

Simple, you will need to add width: 48.9%; to every one of the four ID’s. Also, you need to strip away any margins. This is what your code should look like:

#imagecol1 {
	width: 48.9%;
	margin-left: 0;
	margin-right: 0;
}
#imagecol3 {
	float: right;
	width: 48.9%;
	margin-left: 0;
	margin-right: 0;
}
#imagecol4 {
	clear: both;
	width: 48.9%;
	margin-top: 20px;
	margin-left: 0;
	margin-right: 0;
}
#imagecol2 {
	float: right;
	width: 48.9%;
	margin-top: 20px;
	margin-left: 0;
	margin-right: 0;
}

You will notice that there is a lot of repetition. One of the things that I forgot to mention is that, in addition to the individual classes, I also had a global class of .four that I applied to all four elements. That is how my CSS only declared the width once, and yet it worked on all of them.

I also stripped out the !importants. If you don’t need them, don’t use them.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

You da man Caleb. Worked a treat. I did try adding the width % to each element but didn’t think of stripping the margin. duh!

Seb

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options