Wrap Media so site appears properly on mobile

  • Unknown's avatar
    theclubsydney2011 · Member ·

    I need to make some changes to the menu (I believe) on my site as when accessed via a mobile browser the design is broken and the menu takes up half the screen. Ideally I’d like it not to be a side menu and to just be like normal mobile site menus (ie – the same as how it is on my other site which is Penscratch).

    The website is theclubsydney.com

    Theme – Confit

    I asked this in another part of the forum, conversation as below –

    “Hi there, some of the custom CSS you’ve added has affected the mobile menu, causing it to take up only half the screen.

    You can see how the Confit menu is designed to look on mobile by viewing the Confit demo site: https://confitdemo.wordpress.com/

    To prevent this from happening, I’d suggest you wrap the parts of your custom CSS that affect layout in media queries, so they don’t damage the responsive styles that automatically adjust the layout for smaller screens.”

    “Thanks for that. I’ve only just started managing this site and am relatively new to CSS, is there a way to determine which parts are custom which aren’t? Other than “entry-meta display: none” the rest were already there when I took over and given the site did not have a premium subscription until I upgraded would I be right to assume the rest are standard?

    This is what the site has currently –

    .main-navigation li {
    text-align: center;
    }

    #page:before {
    background-color: white;
    content: ”;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 230px;
    }
    }

    #post-133 {
    /*display: none;*/
    }

    #masthead {
    float: left;
    width: 230px;
    }

    #secondary {
    clear: left;
    float: left;
    overflow: hidden;
    position: relative;
    width: 230px;
    z-index: 2;
    }

    .comments-link {
    display: none;
    }

    .comments-area {
    display: none;
    }

    .socialLinks {
    width: 100%;
    text-align: center;
    }

    .socialLinks a {
    text-decoration: none;
    padding: 5px;
    }

    .socialLinks a:hover {
    text-decoration: none;
    }

    .addressFooter {
    text-align: center;
    border-bottom: 1px solid #cccccc;
    padding: 10px;
    margin-bottom: 10px;
    }

    .subscribeLink {
    text-align: center;
    font-size: 13px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    }

    /*YEP THE VAUX STYLES BEGIN!*/
    .cell {
    display: inline;
    float: left;
    position: relative;
    margin-left: 1%;
    margin-right: 1%;
    width: 31%;
    margin-top: 20px;
    margin-bottom: 20px;
    }

    .cell .image img {
    max-width: 100%;
    height: auto;
    }

    .cell .title {
    font-size: 12px;
    font-weight: bold;
    }

    .cell .details {
    font-size: 12px;
    }

    #post-0 {
    display: none;
    }

    .entry-meta {
    display: none;
    }
    “

    “Everything that’s been entered in the Customizer’s CSS panel is custom CSS and not part of the original theme.

    One way to troubleshoot would be to remove all the custom CSS, and start adding back pieces slowly, bit by bit, testing your site at various screen sizes after each addition. When the mobile menu breaks, you know the last piece was the culprit, and you can then try adding a media query around it to restrict it to a larger screen size, or you can simply delete that piece of CSS.

    Alternatively, you might want to remove all the custom CSS and start fresh with any changes you want to make. Since you’re new to CSS, I’d suggest posting in the CSS Customization forum for assistance.”

    Long story short I’ve tried everything and am completely stuck! Any help would be much appreciated :)

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    theclubsydney2011 · Member ·

    Anyone have any idea? Very frustrating issue!

  • Unknown's avatar
    hallluke · Member ·

    I think I can help with this but I won’t get a chance to look until a bit later on in the day, until then: don’t panic!

  • Unknown's avatar
    theclubsydney2011 · Member ·

    That’d be great. All good, I’m not in a huge rush!

  • Unknown's avatar
    hallluke · Member ·

    So I started by getting rid of your existing custom CSS and then adding lines in one by one to see what they do. I’ve managed to remove quite a bit of it which seemed redundant, but if I’ve accidentally deleted something then let me know what needs to be changed back.

    Add this instead of what you have now and let me know if anything doesn’t look right:

    #page::before,
#masthead {
  background-color: #fff;
}

@media screen and (min-width: 769px) {
  #page::before,
  #masthead,
  #secondary {
    width: 230px;
  }
}

.main-navigation,
.socialLinks,
.addressFooter,
.subscribeLink {
  text-align:center
}

.comments-link,
.comments-area,
.entry-meta {
  display:none
}

.addressFooter {
  border-bottom:1px solid #ccc;
  padding:10px;
  margin-bottom:10px
}

.subscribeLink {
  font-size:13px;
  border-bottom:1px solid #ccc;
  padding-bottom:10px
}

.socialLinks a {
  padding:5px
}

.site-info {
  padding: 1em 0;
}
  • Unknown's avatar
    theclubsydney2011 · Member ·

    I thought that may be the case, I’ve only just started working with the owner of this site so I wanted to start over but wasn’t sure what was needed or what wasn’t.

    But thank you, just added the above and it’s perfect now!

  • The topic ‘Wrap Media so site appears properly on mobile’ is closed to new replies.