Hi all.
I’m still relatively new to responsive designs ( I am learning, slowly ) so a little bit of advice here would be appreciated.
Here is the page I am working on:
As you will see - it’s not very “mobile friendly” - I realise there are a lot of changes that need to be made. The one I’m focusing on at the moment is the removal of both sidebars and the creation of a “slide out menu” when viewing the site on a display that’s lower in width.
My first problem is that when I’m using the Chrome Developer tool to view the site in a responsive manner, the hamburger menu is “shrinking” the main content rather than pushing it to the right - Is this normal? Or is there something in the responsive CSS code that is causing this to happen?
Also - When I look at the site on my iPhone 7, the left slide out menu seems rather small - I set it to 250px in width because I want the advert to fit in there but it seems like it’s scaling it down.
Also - When I’m on my iPhone and I deselect the menu, the page doesn’t go back to the top - the menu goes back and the page is slightly lower than when it started and if I scroll up, I see the menu hiding there behind the rest of the content. I also cannot scroll up and down the menu if I rotate the phone.
Lastly, when I go through the various screen sizes that chrome offers in it’s developer console and select the hamburger menu the slide out section comes up at the bottom also (below the site content) - I believe this could be linked to my first issue with the site “shrinking” instead of shifting but I can’t be sure.
I realise this could be a lot to ask but I’m hoping for somebody more experienced with responsive designs it’ll be a quick one to answer. Here’s the responsive CSS in case you can see the answer in there - If you need me to post code snippets from anything else on the page please let me know.
@media (max-width: 1023px) {
body {
padding: 0 !important;
}
div.left-column,
div.right-column {
display: none;
}
li.shipmail-view,
li.logbook-view,
li.album-view,
li.rank-view,
li.shipmail-create,
li.logbook-create,
li.rank-barometer,
li.album-upload
{
display: block !important;
padding: 0 !important;
width: 100% !important;
float: left !important;
text-align: left !important;
}
div.grid-shipmail,
div.grid-logbook {
margin-bottom: 35px !important;
}
/* LEFT MENU */
li.left-menu-section {
padding-top: 20px;
}
.navigation {
list-style: none;
background: #022734;
width: 98%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
-webkit-margin-before: 0;
}
ul.left-menu a.left-menu-item,
ul.other-links li a,
ul.chatshop li a {
color: #fff !important;
}
div.chatshop-title,
div.other-links-title {
padding-left: 5px !important;
font-size: 20px !important;
padding-top: 0 !important;
color: #fff !important;
}
ul.chatshop,
ul.other-links {
padding-left: 40px !important;
}
.site-wrap {
min-width: 100%;
min-height: 100%;
background-color: #fff;
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
}
.nav-trigger {
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
position: fixed;
top: 15px;
left: 15px;
z-index: 2;
width: 30px;
height: 30px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
background-size: contain;
}
.nav-trigger:checked + label {
left: 275px;
}
.nav-trigger:checked ~ .site-wrap {
left: 260px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
.nav-trigger + label, .site-wrap {
transition: left 0.2s;
}
.ad-space-sidebar {
padding-left: 4px;
}
body {
overflow-x: hidden;
}
}
@media (min-width: 1024px) {
.navigation {
display: none;
}
input#nav-trigger {
opacity: 0;
}
}
