forum.coppermine-gallery.net

Support => cpg1.5.x Support => cpg1.5 themes (visuals) => Topic started by: Manutjee on February 02, 2016, 04:53:06 pm

Title: Responsive Design: need help with positioning the navigation
Post by: Manutjee on February 02, 2016, 04:53:06 pm

Hello,

I've been trying to successfully create my very first Coppermine Responsive theme and I'm doing good - if I may say so myself.
The only thing that needs to be done is making sure the navigation that holds Home, Login, Last Uploads etc. to NOT move on smaller screen sizes and I've got no clue on how achieve that with coding.
Everything looks great on personal computers and laptops, but as soon as it hits certain screen sizes, the navigation starts to move around in order to fit the screen and at its smallest size the navigation completely disappears. How would I be able to solve that and make sure the navigation stays where it's supposed to be? It's supposed to be below the main navigation, like it's shown on desktops/laptops.

I've added attachments below and I have used Mozilla FireFox's Responsive Design View (CTRL+SHIFT+M)
Due to files being too large, I have put the images on an IMGhost - I apologize for that.

http://i.imgur.com/MqLSvan.png
http://i.imgur.com/gpvpJ7F.png
http://i.imgur.com/glNRvfU.png
http://i.imgur.com/uHabnxP.png
http://i.imgur.com/IvZx7rK.png

Link to theme: http://www.98designs.flaunt.nu/portfolio/index.php?theme=cpgpremade12hereisgina

Title: Re: Responsive Design: need help with positioning the navigation
Post by: allvip on February 02, 2016, 05:10:04 pm

You placed the

Code: [Select]

<div class="syssub"></div>

under

Code: [Select]

<div id="header"></div>

and then added top: -540px; for .syssub class. DELETE top: -540px;

Code: [Select]

.syssub {
    background-color: #f7f7f7;
    position: relative;
    margin: 0 auto;
    top: -540px;
    max-width: 1080px;
    _width: 100%;
    display: block;
    text-decoration: none;
    text-align: left;
    padding: 8px;
    letter-spacing: 0px;
    text-align: center;
    line-height: 13px;
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-size: 13px;
    z-index: 1;
    overflow: hidden;
    color: #f04a5e;
    text-transform: uppercase;
}

That's a very wrong way to move a div on the top of the page.

Open template.html and move

Code: [Select]

<div class="syssub"></div>

above

Code: [Select]

<div id="navigation"></div>


Title: Re: Responsive Design: need help with positioning the navigation
Post by: allvip on February 02, 2016, 07:06:31 pm

Another thing: the header image. For responsive design is better not to use it as background image but as inline image.

REPLACE in responsive.css

Code: [Select]

/*------------------------------------------
     959px Media
------------------------------------------*/
@media only screen and (max-width: 959px), only screen and (max-device-width: 959px) {

#header {
background-image: url('../images/header960.png');
background-repeat: no-repeat;
background-position: center;
background-color:#fff!important;
height:528px!important;
width:auto!important;
overflow:hidden!important;
}
}

/*------------------------------------------
     734px Media
------------------------------------------*/
@media only screen and (max-width: 734px), only screen and (max-device-width: 734px) {

#header {
background-image: url('../images/header740.png');
background-repeat: no-repeat;
background-position: center;
background-color:#fff!important;
height:407px!important;
width:auto!important;
overflow:hidden!important;
margin-top:-20px;
}
}

/*------------------------------------------
     450px Media
------------------------------------------*/
@media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {

#header {
background-image: url('../images/header450.png');
background-repeat: no-repeat;
background-position: center;
background-color:#fff!important;
height:248px!important;
width:auto!important;
overflow:hidden!important;
}
}

WITH

Code: [Select]

#header img {
max-width: 100%;
height: auto!important;
}

Open template.html and replace

Code: [Select]

<div id="header"></div>
with

Code: [Select]

<div id="header"><img src="themes/cpgpremade12hereisgina/images/header.png" align="middle"/></div>

Title: Re: Responsive Design: need help with positioning the navigation
Post by: Manutjee on February 13, 2016, 12:52:34 pm

Issue(s) are solved.
Sorry for the (very) late reply on my part. Thank you very, very much for the help. It definitely makes sense now. :-) I'm sure I'll still make plenty mistakes, though... Hahaha!