Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive CSS on Generate
- This topic has 1 reply, 2 voices, and was last updated 11 years, 4 months ago by Hard Boiled Greg.
-
AuthorPosts
-
November 29, 2012 at 4:01 pm #2394charriott4Member
Hey Everyone,
Im working on a site at http://www.doitright.co/
My problem is with the responsive css. Im not entirely familiar with it and I have been trying and experimenting for hours and its starting to get frustrating.
I added a 3 column section under the generate box and I almost have it to where i want it (exactly how the executive 3 widgets respond) , except heres what happens. As you reduce the browser size all is fine at first, then the 3 widgets jump on top of each other which is fine as its supposed to, but then as it gets smaller it switches back to all 3 widgets on the same line?
Can someone please help me figure this out?
Here is my media css
@media only screen and (min-width: 600px) and (max-width: 960px) {body {
width: 95%;
margin: 0 auto;
}.content-sidebar-sidebar #content,
.content-sidebar #content,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.full-width-content #content,
.generate-landing #inner .wrap,
.generate-landing.full-width-content #content,
.sidebar,
.sidebar-content #content,
.sidebar-content-sidebar #content,
.sidebar-sidebar-content #content,
#content-sidebar-wrap,
#footer .creds,
#footer .gototop,
#footer-widgets,
#footer-widgets .wrap,
#header .widget-area,
#header .wrap,
#inner,
#inner .wrap,
#nav .wrap,
#sidebar-alt,
#subnav,
#title-area,
#footer .wrap {
width: 100%;
}#header {
padding: 3.5% 1.5625%;
text-align: center;
width: 96.875%;
}#title-area {
margin-bottom: 15px;
padding: 0;
width: 100%;
}#title {
float: none;
font-size: 2.25em;
}.header-image #header #title-area {
background-size: contain !important;
width: 100% !important;
}#description {
font-size: 13px;
}#header .widget-area {
float: none;
padding: 0;
width: 100%;
}#generate-box {
float: none;
padding: 0;
width: 100%;
}#header .searchform {
float: none;
}
#generate-box .wrap {
padding: 3.340757238307%;
width: 93.541666666667%
}#generate-box h4 {
-moz-box-shadow: 0px 2px 5px #000;
-webkit-box-shadow: 0px 2px 5px #000;
background: #a61d1d url(images/generatebox-heading-short.png) repeat-x;
box-shadow: 0px 2px 5px #000;
margin: -4.45434298441% -5% 0;
padding: 2.78396% 3.34076%;
}.generate-blue #generate-box h4 {
background: #1d6ea6 url(images/blue/generatebox-heading-short.png) repeat-x;
}.generate-green #generate-box h4 {
background: #6ea61d url(images/green/generatebox-heading-short.png) repeat-x;
}.generate-orange #generate-box h4 {
background: #de5f01 url(images/orange/generatebox-heading-short.png) repeat-x;
}#generate-box img.alignright {
right: -36px;
top: 68px;
width: 38%;
}
#generate-box p {
width: 70%;
}#generate-box form {
background: url(images/arrow.png) no-repeat 0 0;
padding: 5px 0 0 75px;
}#nav li a {
padding: 8px 6px;
}#nav li:first-child {
padding-left: 11px;
}#nav li li:first-child{
padding: 0;
}#nav li:last-child {
background: none;
}#content-sidebar-wrap,
#sidebar-content-wrap,
.sidebar-content #content,
.content-sidebar #content {
float: left;
}.content-sidebar #inner .wrap,
.sidebar-content #inner .wrap {
background: #fff;
}.content-sidebar #content,
.sidebar-content #content,
.full-width-content #content,
.sidebar {
padding: 25px 7.017543859649%;
width: 85.964912280702%;
}.post-image {
margin: 0 40px 30px -40px !important;
}.sidebar {
background: #f7f7f7;
}#footer-widgets .wrap {
padding: 0;
}#generate-home .wrap {
padding: 30px 0 0;
width: 100%;
}#generate-home .widget {
text-align: center;
width: 100%;
}#generate-home .featuredpage .page,
#generate-home .featuredpost .post {
margin: 0 0 30px;
}#generate-home .featuredpage img,
#generate-home .featuredpost img {
margin: 0 0 20px;
}#generate-home a.more-link {
margin: 20px 0 0;
}}
Web Designs By Chrissy | Twitter @designbychrissy
November 29, 2012 at 4:46 pm #2403Hard Boiled GregMemberFirst of all, nice site 🙂
You added the responsive rules to this section:
@media only screen and (min-width: 600px) and (max-width: 960px)Which only accommodates screen sizes between 600px and 960px.  You need to add rules to the media section above as well:
@media only screen and (max-width: 600px)HBG
Website: Hard Boiled Greg Twitter: @hbgreg
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.