• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Eleven40 Customisation Responsive Issue

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Eleven40 Customisation Responsive Issue

This topic is: resolved

Tagged: Eleven40, responsive

  • This topic has 4 replies, 2 voices, and was last updated 10 years, 3 months ago by tribalcafe.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 22, 2012 at 3:38 pm #1299
    Smarty
    Member

    Hi 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 #1348
    Smarty
    Member

    Don'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 #19617
    tribalcafe
    Member

    I have the same problem - can you let me know the solution please really appreciated

    February 12, 2013 at 8:30 am #19809
    Smarty
    Member

    Hi Tribalcafe,

    My problem was due to an unrelated error on my page. It turned out that on some text I had "&amp" 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 #19893
    tribalcafe
    Member

    OK, thanks though for getting back to me appreciated.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Eleven40 Customisation Responsive Issue’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble