help making footer widgets responsive

  • pietergoosen

    (@pietergoosen)


    13 years ago

    hi there

    i need help, created a twenty twelve child theme and added 4 footer widgets, here are the css

    #footerwidget {
	padding: 1rem 1rem;
	padding-bottom: 0;
	overflow: hidden;
	width: 98%;
	display: block;
	float: center;
}
/* Two Widget Areas */
#footerwidget.two .widget-area {
	float: left;
	margin-right: 4%;
	width: 46.7%;
}
#footerwidget.two .widget-area + .widget-area {
	margin-right: 0;
}
/* Three Widget Areas */
#footerwidget.three .widget-area {
	float: left;
	margin-right: 4%;
	width: 29.7%;
}
#footerwidget.three .widget-area + .widget-area + .widget-area {
	margin-right: 0;
}
/* Four Widget Areas */
#footerwidget.four .widget-area {
	float: left;
	margin-right: 4%;
	width: 21.3%;
}
#footerwidget.four .widget-area + .widget-area + .widget-area + .widget-area {
	margin-right: 0;
}

    how do i make them responsive. i want these widgets show beneath each other in small screens, not next to each other. been trying the whole day. i’m missing something somewhere

Viewing 1 replies (of 1 total)
  • zeaks

    (@zeaks)

    12 years, 5 months ago

    Clearing them and changing width to 100% should make them display one on top of the other on mobile. Make sure to use @media to target smaller devices. Here’s an example

    @media only screen and (max-device-width: 480px) {
   #footerwidget {
      width: 100%;
      clear: both;
   }
}

    Something like that

Viewing 1 replies (of 1 total)

The topic ‘help making footer widgets responsive’ is closed to new replies.