Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Responsive Design: need help with positioning the navigation  (Read 2952 times)

0 Members and 1 Guest are viewing this topic.

Manutjee

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 80
Responsive Design: need help with positioning the navigation
« 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
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Responsive Design: need help with positioning the navigation
« Reply #1 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>
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Responsive Design: need help with positioning the navigation
« Reply #2 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>
« Last Edit: February 05, 2016, 12:50:08 pm by allvip »
Logged

Manutjee

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 80
Re: Responsive Design: need help with positioning the navigation
« Reply #3 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!
Logged
Pages: [1]   Go Up
 

Page created in 0.179 seconds with 19 queries.