Module boxes folding under

Hello all, I have changed my cms website template to a responsive. While adding some modules to the footer area, three in a row, I can’t seem to make them fold under each other when displayed on a mobile device.

Here is the css code:


.divTable {
    display: table;
    margin: 0 auto;
    padding: 0;
    width: auto;
    /*border: 1px solid #ccc;*/
    border-collapse: separate;
    /*border-spacing: 1px;*/
}
.divCaption { display: table-caption; padding: 0.3em 0 0.3em 0; font-weight: bold; border: 1px solid #ccc; }
.divHeadRow { font-weight: bold; border: none; }
.divRow {
   display: table-row;
   width: auto;
   border: none;
}

.divCell {
    margin: 0 0.2em 0 0.2em;
    padding: 0;
    width: 32.5%;
    float: left;
    display: table-column;
    /*border-collapse:separate;
    empty-cells: hide;*/
    border: 1px solid #ccc;
    /*min-height: 405px;*/
}
.divCell2 {
    margin: 0 0.2em 0 0.2em;
    padding: 0;
    width: 32.5%;    /*    226px        */
    float: left;
    display: table-column;
    /*border-collapse:separate;
    empty-cells: hide;*/
    border: 1px solid #ccc;
}
.divCell-grk {
    margin: 0 0.3em 0 0.3em;
    padding: 0;
    width: 226px;
    float: left;
    display: table-column;
    font-family: "Times New Roman", Times, serif;
    border: 1px solid #ccc;
}
.divCell h3 {
    margin: 0.3em 0 0.3em 0;
    padding: 0;
    font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
}
.divCell p {
    margin: 0.3em 0 0.3em 0;
    padding: 0;
    font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: normal;
    text-align: left;
}

html code is


<footer role="contentinfo" class="row clearfix">   
    <div class="divTable">
        <div class="divHeadRow">
            <div class="divCell"> 

            </div>
        </div>
    <div class="clearfix"></div>
</footer>

Currently the page looks like this http://www.bournias.net/genealogy/greek-genealogy-research-services/

What am I doing wrong?

The trick to altering the layout like that is to use @media rules. So, for example, in your style sheet you’d use something like this:

@media only screen and (max-width: 600px) {
    .divCell {
        display: block;
        width: 100%;
    }
}

That’s just a rough example. You’ll need other settings as well, and might prefer to have the rule kick in at a different screen width.

You’ll also need to uncomment this in your HTML:

<meta name="viewport" content="width=device-width" />

Hello Ralph.m,

Thanks for responding. I added the code into the media area that you specified but something is still wrong. I just took a look at it using firefox resize view responsive layouts and only the third box has folded under the second.

As for the viewport code, I thought that the 2nd choice here which I have enabled was supposedly the best to use.


<!-- for mobiles -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!-- <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> -->

As for the viewport code, I thought that the 2nd choice here which I have enabled was supposedly the best to use.

No that’s about the worst thing you can do to the poor mobile user. Let them pinch and zoom to their hearts delight :slight_smile:

More info here:

http://davidbcalhoun.com/2010/viewport-metatag

Hello Paul,

Thank you for confirming that.

You need to remove the float also and remove display:table from the parent and probably kick the media query in earlier like so:


@media only screen and (max-width: 762px) {
	.divTable { display:block }
	.divCell {
		display: block;
		width: auto;
		float:none;
		margin:10px;
	}
}


Updated the css files but something is still amiss.
I commented the display:table from the parent, and then tried it the way you sent it. I also commented the float none but it looks like something else is affecting it.

Hi,

Uncomment the float and move the media query into the correct position and it will work. :slight_smile:

You have placed the media query before the actual rules for those elements so as usual in the cascade any previous rules of the same weight are over-written.

You must place you media query after the original rules or it will have no effect. The rules for that section are in another css file that follows the one you put the media quey in and thus will have less importance and be over-written.

I placed in between the media queries of 600 and 768. I assume this is what you mean.


@media only screen and (min-width: 34.286em) {
/* 1 ROOT                     ============================================================================= */
/* 2 GRID                     ============================================================================= */
/* 3 HELPERS                 ============================================================================= */
/* 4 TYPOGRAPHY             ============================================================================= */
/* 5 LINKS                     ============================================================================= */
/* 6 FIGURES & IMAGES         ============================================================================= */
/* 7 TABLES                 ============================================================================= */
/* 8 FORMS & BUTTONS        ============================================================================= */
/* 9 HEADER                     ============================================================================= */
/* 10 LOGO                     ============================================================================= */
/* 11 NAVIGATION            ============================================================================= */
/* 12 BANNER                 ============================================================================= */
/* 13 ABOVE                 ============================================================================= */
/* 14 MAIN CONTENT             ============================================================================= */
/* 15 COMPLEMENTARY         ============================================================================= */
/* 16 BOTTOM                 ============================================================================= */
/* 17 FOOTER                 ============================================================================= */
/* 18 VENDOR-SPECIFIC         ============================================================================= */
/* 19 JOOMLA SPECIFICS         ============================================================================= */
/* 20 MODULE STYLES         ============================================================================= */
}
/* 600px */
@media only screen and (min-width: 37.5em) {
/* 1 ROOT                     ============================================================================= */
/* 2 GRID                     ============================================================================= */
/* 3 HELPERS                 ============================================================================= */
/* 4 TYPOGRAPHY             ============================================================================= */
/* 5 LINKS                     ============================================================================= */
/* 6 FIGURES & IMAGES         ============================================================================= */
/* 7 TABLES                 ============================================================================= */
/* 8 FORMS & BUTTONS        ============================================================================= */
/* 9 HEADER                     ============================================================================= */
/* 10 LOGO                     ============================================================================= */
/* 11 NAVIGATION            ============================================================================= */
/* 12 BANNER                 ============================================================================= */
/* 13 ABOVE                 ============================================================================= */
#aboveRow {
    margin: 0; padding: 0; width: 100%;
    border-bottom:1px solid #eee;
}
#aboveRow article {
    width:47.5%;
    margin-right:5%;
}
#aboveRow :nth-child(2n) article {
    margin-right:0;
}
/* 14 MAIN CONTENT             ============================================================================= */
/* 15 COMPLEMENTARY         ============================================================================= */
#left article {
    width:47.5%;
    margin-right:3%;
}
#left :nth-child(2n) {
    margin-right:0%;
}
/* 16 BOTTOM                 ============================================================================= */
#bottomRow article {
    width:47.5%;
    margin-right:5%;
}
#bottomRow :nth-child(2n) article {
    margin-right:0;
}
/* 17 FOOTER                 ============================================================================= */
footer article {
    width:47.5%;
    margin-right:5%;
}
footer :nth-child(2n) article {
    margin-right:0;
}
/* 18 VENDOR-SPECIFIC         ============================================================================= */
/* 19 JOOMLA SPECIFICS         ============================================================================= */
/* 20 MODULE STYLES         ============================================================================= */
#aboveRow article,
#left article,
#bottomRow article,
footer article {
    float:left;
}
}


@media only screen and (max-width: 762px) {
.divTable { display:block }
.divCell {
display: block;
width: auto;
float:none;
margin:10px;
}
}

/* 768px */
@media only screen and (min-width: 48em) {
/* 1 ROOT                     ============================================================================= */
body {
    position:relative;
}
/* 2 GRID                     ============================================================================= */
/* 3 HELPERS                 ============================================================================= */
.mobile {
    display:none;
}
.desktop {
    display: inherit;
}
/* 4 TYPOGRAPHY             ============================================================================= */
/* 5 LINKS                     ============================================================================= */
/* 6 FIGURES & IMAGES         ============================================================================= */
/* 7 TABLES                 ============================================================================= */
/* 8 FORMS & BUTTONS        ============================================================================= */
input,
textarea,
select {
  max-width: 360px;
}
/* 9 HEADER                     ============================================================================= */
/* 10 LOGO                     ============================================================================= */
#logoRow.row {
    padding:30px 0 10px;
    padding:3rem 0 1rem;
}
/* 11 NAVIGATION            ============================================================================= */
#menu {
    position:absolute;
    width:75%;
    top:40px;
    top:4rem;
    right:0;
}
#menu.row {
    border-top:none;
    background:none;
}

nav ul.menu {
    float:right;
}
nav li {
    width:auto;
    margin:0 0 0 2em;
}
nav li a {
    text-align:center;
    padding:0;
    border-bottom:0;    
}
nav li a:nth-child(odd) {
    border-right:0;
}

/* 12 BANNER                 ============================================================================= */
/* 13 ABOVE                 ============================================================================= */
/* 14 MAIN CONTENT             ============================================================================= */
aside#sidebar {
    width:25%;    /* 30  */
    margin-right:5%;
    float:left;
}
#left article {
    margin-right:0;
    width:100%;
}
#main {
    border-bottom:0;
    margin-bottom:0;
}
#main.mainLeft {
    width:70%;    /* 75 */
    float:right;
}
/* 15 COMPLEMENTARY         ============================================================================= */
/* 16 BOTTOM                 ============================================================================= */
#bottomRow {
    border-top:1px solid #e5e5e5;
}
#bottomRow article {
    width:47.5%;
    margin-right:5%;
    margin-bottom:5%;
}
#bottomRow :nth-child(2n) article {
    margin-right:0;
}
/* 17 FOOTER                 ============================================================================= */
/* 18 VENDOR-SPECIFIC         ============================================================================= */
/* 19 JOOMLA SPECIFICS         ============================================================================= */
/* 20 MODULE STYLES         ============================================================================= */
}
/* 992px */
@media only screen and (min-width: 62em) {
/* 1 ROOT                     ============================================================================= */
/* 2 GRID                     ============================================================================= */
/* 3 HELPERS                 ============================================================================= */
/* 4 TYPOGRAPHY             ============================================================================= */
/* 5 LINKS                     ============================================================================= */
/* 6 FIGURES & IMAGES         ============================================================================= */
/* 7 TABLES                 ============================================================================= */
/* 8 FORMS & BUTTONS        ============================================================================= */
/* 9 HEADER                     ============================================================================= */
/* 10 LOGO                     ============================================================================= */
#logoRow.row {
    padding:40px 0 20px;
    padding:4rem 0 2rem;
}
/* 11 NAVIGATION            ============================================================================= */
#menu {
    top:60px;
    top:6rem;
}
nav li {
    margin:0 0 0 3em;
}
/* 12 BANNER                 ============================================================================= */
/* 13 ABOVE                 ============================================================================= */
#aboveRow article {
    width:21.25%;
}
#aboveRow :nth-child(2n) article {
    margin-right:5%;
}
#aboveRow :nth-child(4n) article {
    margin-right:0;
}
/* 14 MAIN CONTENT             ============================================================================= */
/* 15 COMPLEMENTARY         ============================================================================= */
/* 16 BOTTOM                 ============================================================================= */
#bottomRow article {
    width:30%;
}
#bottomRow :nth-child(2n) article {
    margin-right:5%;
}
#bottomRow :nth-child(3n) article {
    margin-right:0;
}
/* 17 FOOTER                 ============================================================================= */
/* 18 VENDOR-SPECIFIC         ============================================================================= */
/* 19 JOOMLA SPECIFICS         ============================================================================= */
/* 20 MODULE STYLES         ============================================================================= */
}
/* 1382px */
@media only screen and (min-width: 86.375em) {
/* 1 ROOT                     ============================================================================= */
/* 2 GRID                     ============================================================================= */
/* 3 HELPERS                 ============================================================================= */
/* 4 TYPOGRAPHY             ============================================================================= */
/* 5 LINKS                     ============================================================================= */
/* 6 FIGURES & IMAGES         ============================================================================= */
/* 7 TABLES                 ============================================================================= */
/* 8 FORMS & BUTTONS        ============================================================================= */
/* 9 HEADER                     ============================================================================= */
/* 10 LOGO                     ============================================================================= */
/* 11 NAVIGATION            ============================================================================= */
/* 12 BANNER                 ============================================================================= */
/* 13 ABOVE                 ============================================================================= */
/* 14 MAIN CONTENT             ============================================================================= */
/* 15 COMPLEMENTARY         ============================================================================= */
/* 16 BOTTOM                 ============================================================================= */
/* 17 FOOTER                 ============================================================================= */
/* 18 VENDOR-SPECIFIC         ============================================================================= */
/* 19 JOOMLA SPECIFICS         ============================================================================= */
/* 20 MODULE STYLES         ============================================================================= */
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
/* 1 ROOT                     ============================================================================= */
/* 2 GRID                     ============================================================================= */
/* 3 HELPERS                 ============================================================================= */
/* 4 TYPOGRAPHY             ============================================================================= */
/* 5 LINKS                     ============================================================================= */
/* 6 FIGURES & IMAGES         ============================================================================= */
/* 7 TABLES                 ============================================================================= */
/* 8 FORMS & BUTTONS        ============================================================================= */
/* 9 HEADER                     ============================================================================= */
/* 10 LOGO                     ============================================================================= */
/* 11 NAVIGATION            ============================================================================= */
/* 12 BANNER                 ============================================================================= */
/* 13 ABOVE                 ============================================================================= */
/* 14 MAIN CONTENT             ============================================================================= */
/* 15 COMPLEMENTARY         ============================================================================= */
/* 16 BOTTOM                 ============================================================================= */
/* 17 FOOTER                 ============================================================================= */
/* 18 VENDOR-SPECIFIC         ============================================================================= */
/* 19 JOOMLA SPECIFICS         ============================================================================= */
/* 20 MODULE STYLES         ============================================================================= */ 
}

I may be misinterpreting that statement, but if you want some styles to apply just within a certain range, you can do it like so:

@media only screen and (min-width: 34em) and (max-width: 37em) {

}

No that’s the wrong css file.:slight_smile:

The rules for .divCell are in this file.

<link href=“http://www.bournias.net/templates/oneweb/css/template_css.css” rel=“stylesheet” type=“text/css” media=“all” />

In your html page you have that file as the last stylesheet (apart from print).



<!--	css loaders	//-->
<link href="http://www.bournias.net/templates/oneweb/css/style-commented.css" rel="stylesheet" type="text/css" media="all" />

<link href="http://www.bournias.net/templates/oneweb/css/template_css.css" rel="stylesheet" type="text/css" media="all" />

The media query I gave you should go at the end of this file:

Okay, sorry. I just copied the media query to the template.css file and deleted it from the other.
It looks like I still have a problem. If it is easier, maybe you can suggest different css class layout that I will adapt.

I created a separate html file using the code and it seems to work. I do not understand why it is not working online.

I attach the file.

HI,

You still haven’t used the code I gave you lol :slight_smile:

This is what you used (I think you misinterpreted Ralph’s post):


 @media only screen and (min-width: 34em) and (max-width: 37em) {
.divTable { display:block }
.divCell {
	display: block;
	width: auto;
	float: none;
	margin: 10px;
}
}

That means that the media query will only be active when the browser is greater than 34em but less than 37 em. That means the media query only kicks in over a range of 3em (about 40px). If you close the browser window slowly you will see that suddenly it works but then its gone again as you’ve only specifed a tiny range.

Use what I gave you before:


@media only screen and (max-width: 762px) {
	.divTable { display:block }
	.divCell {
		display: block;
		width: auto;
		float:none;
		margin:10px;
	}
}

You can convert the 762px to ems if you want but its good enough in px for this example.

Again sorry, I thought that I was using the last set of code. It works!!!
Thank you

After this session, I think that I am actually starting to understand the use of media query better.

Then our work here is done :slight_smile: