Community Forums › Forums › Archived Forums › Design Tips and Tricks › Eleven40 Customisation Responsive Issue
Tagged: Eleven40, responsive
- This topic has 4 replies, 2 voices, and was last updated 12 years ago by
tribalcafe.
-
AuthorPosts
-
November 22, 2012 at 3:38 pm #1299
Smarty
MemberHi All,
I have adapted the Eleven40 theme for a project to be similar to Minimalist, however, if I view on a mobile the 4 icons are all bunched up and not displaying properly rather than 2 above each other.
I know its me, can anyone offer any advice on where I have gone wrong?
The website is: http://www.magicbrothers.com, only homepage at present hence everything links back to this page.
This is the Responsive Code from style.css
/* Responsive Design
------------------------------------------------------------ */
@media only screen and (max-width: 1200px) {.wrap {
max-width: 960px;
}#content-sidebar-wrap {
width: 770px;
}#content {
width: 400px;
}.content-sidebar #content,
.sidebar-content #content {
width: 630px;
}.content-sidebar-sidebar #content,
.sidebar-sidebar-content #content {
width: 440px;
}.full-width-content #content {
width: 100%;
}.genesis-grid-even,
.genesis-grid-odd {
float: left;
margin: 0 0 30px;
padding: 0;
width: 100%;
}.five-sixths,
.four-fifths,
.four-sixths,
.one-fifth,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fifths,
.three-fourths,
.three-sixths,
.two-fifths,
.two-fourths,
.two-sixths,
.two-thirds {
padding: 0;
width: 100%;
}.footer-widgets-1 {
width: 290px;
}.footer-widgets-2 {
width: 300px;
}.footer-widgets-3 {
width: 290px;
}}
@media only screen and (max-width: 800px) {body {
width: 100%;
margin: 0 auto;
}.archive-page,
.content-sidebar #content,
.content-sidebar-sidebar #content,
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.sidebar,
.sidebar-content #content,
.sidebar-content-sidebar #content,
.sidebar-sidebar-content #content,
.wrap,
#content-sidebar-wrap,
#footer .creds,
#footer .gototop,
#sidebar-alt {
width: 100%;
}#inner .wrap {
padding: 20px;
width: auto;
}#header .wrap {
background: url(images/mb-logo.png) top center no-repeat;
}.eleven40-blue #header .wrap {
background: url(images/blue/mb-logo.png) top center no-repeat;
}.eleven40-green #header .wrap{
background: url(images/green/mb-logo.png) top center no-repeat;
}.eleven40-red #header .wrap {
background: url(images/red/mb-logo.png) top center no-repeat;
}#title {
min-height: 62px;
margin: 18px 0 0;
}.menu-primary,
.menu-secondary,
#header ul.menu,
#header .widget-area,
#title-area {
float: none;
text-align: center;
width: 100%;
}#header .searchform {
float: center;
}#header ul.menu {
background: url(images/bg-pattern.png);
float: left;
}.menu-primary li,
.menu-secondary li,
#header ul.menu li {
display: inline-block;
float: none;
}.menu-primary a,
.menu-secondary a,
#header .menu a {
padding: 10px;
}.menu li.right {
display: none;
}.page-title {
font-size: 24px;
padding: 10px 20px;
}.page-title p {
line-height: 1.2;
}.content-sidebar #content,
.content-sidebar-sidebar #content,
.sidebar,
.sidebar-content #content,
.sidebar-content-sidebar #content,
.sidebar-sidebar-content #content {
border: none;
padding: 20px 0;
width: 100%;
}h1,
h2,
h2 a,
h2 a:visited {
font-size: 30px;
}.after-post form {
background: none;
padding: 0;
}#footer-widgets .widget {
padding: 20px 20px 0;
}.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
margin: 0;
}#footer .creds,
#footer .gototop {
float: none;
}#footer p {
padding: 0 20px;
text-align: center;
}}
@media only screen and (max-width: 600px) {#home-features {
padding: 30px 0 20px;
}.home-features-1,
.home-features-2,
.home-features-3,
.home-features-4 {
padding: 0 0 30px;
width: 50%;
}blockquote {
padding: 30px 10px 5px;
}.split-column-1,
.split-column-2 {
margin: 0;
width: 100%;
}.entry-content .split-column-1 ul {
padding: 0;
}.navigation li a,
.navigation li.disabled,
.navigation li a:hover,
.navigation li.active a {
padding: 5px;
}}
@media only screen and (max-width: 400px) {body,
p,
select,
textarea {
font-size: 16px;
}#header .menu a {
margin: 0 5px;
}}
@media only screen and (max-width: 300px) {.home-features-1,
.home-features-2,
.home-features-3,
.home-features-4 {
padding: 0 0 20px;
width: 100%;
}}
If anyone can help I would really appreciate it.
Thanks
Web Design, Development & Consultancy
Being The Best He Can Be! | http://www.paul-smart.co.uk
November 23, 2012 at 9:27 am #1348Smarty
MemberDon't worry I have figured this issue out.
Web Design, Development & Consultancy
Being The Best He Can Be! | http://www.paul-smart.co.uk
February 11, 2013 at 9:38 am #19617tribalcafe
MemberI have the same problem - can you let me know the solution please really appreciated
February 12, 2013 at 8:30 am #19809Smarty
MemberHi Tribalcafe,
My problem was due to an unrelated error on my page. It turned out that on some text I had "&" instead of "&" and I had left a "/a>" when a link had been removed.
As soon as I amended these 2 errors it worked fine, that will teach me to be more diligent!
Put your url in here http://validator.w3.org/, it should help you find any errors on your page.
Web Design, Development & Consultancy
Being The Best He Can Be! | http://www.paul-smart.co.uk
February 12, 2013 at 2:15 pm #19893tribalcafe
MemberOK, thanks though for getting back to me appreciated.
-
AuthorPosts
- The topic ‘Eleven40 Customisation Responsive Issue’ is closed to new replies.