PDA

View Full Version : Responsivity Problems


Justintime9
01-08-2018, 09:27 PM
So I'm trying to make a responsive website in Dreamweaver and have run into some issues. I started the site by following a tutorial, which perhaps does not line up perfectly with what I'm trying to do. So there may be some unnecessary / cumbersome code.

But my main question is regarding the tablet view. On desktop view the .blackbox div, which holds the carousel, goes all the way across the screen:

http://imghst.co/89/!zJNa8xHv(.jpg

However on tablet view it only goes so far and then stops (perhaps blackbox has disappeared and I'm just seeing the carousel?)

http://imghst.co/91/R3N(!wQ!rB.jpg

Anyway, here's the code. If you see anything else that looks weird or unnecessary because I want to weed that out before making any more pages.

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Justin Grajek.com</title>
<link rel="stylesheet" href="JG_Styles.css">
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('Images/nav_Portfolio_mouseover.png','Images/nav_Resume_mouseover.png','Images/nav_Blog_mouseover.png','Images/nav_Contact_mouseover.png','Images/soc_LinkedIn_rollover.png','Images/soc_Instagram_rollover.png')">





<header>
<div class="row">
<div class="col">
<img class="style-logo" src="Images/JG_Logo_Mobile.png" alt="Justin Grajek Logo">
<nav class="style-nav">
<ul>
<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav_Portfolio','','Images/nav_Portfolio_mouseover.png',1)"><img id="nav_Portfolio" src="Images/nav_Portfolio.png" alt="This links to the portfolio page"></a></li>

<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav_Resume','','Images/nav_Resume_mouseover.png',1)"><img id="nav_Resume" src="Images/nav_Resume.png" alt="This links to the Resume page"></a></li>

<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav_Blog','','Images/nav_Blog_mouseover.png',1)"><img id="nav_Blog" src="Images/nav_Blog.png" alt="This links to the Blog page"></a></li>

<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav_Contact','','Images/nav_Contact_mouseover.png',1)"><img id="nav_Contact" src="Images/nav_Contact.png" alt="This links to the contact page"></a></li>

<a href="https://www.linkedin.com/in/justin-grajek-a4624043/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('soc_LinkedIn','','Images/soc_LinkedIn_rollover.png',1)"><img id="soc_LinkedIn" src="Images/soc_LinkedIn.png" alt="This links to my LinkedIn page"></a>

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('soc_Instagram','','Images/soc_Instagram_rollover.png',1)"><img id="soc_Instagram" src="Images/soc_Instagram.png" alt="This links to my Instagram page"></a>
</ul>
</nav>
</div>
</div>
</header>







<div class="container">

<div class="blackbox">
<div class="carousel">
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="jssor.slider-26.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {

var jssor_1_options = {
$AutoPlay: 1,
$Idle: 7000,
$Cols: 1,
$Align: 0,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};

var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

/*#region responsive code begin*/

var MAX_WIDTH = 1223;

function ScaleSlider() {
var containerElement = jssor_1_slider.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;

if (containerWidth) {

var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

jssor_1_slider.$ScaleWidth(expectedWidth);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}

ScaleSlider();

$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
/*#endregion responsive code end*/
});
</script>
<style>
/* jssor slider loading skin spin css */
.jssorl-009-spin img {
animation-name: jssorl-009-spin;
animation-duration: 1.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes jssorl-009-spin {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}


.jssorb053 .i {position:absolute;cursor:pointer;}
.jssorb053 .i .b {fill:#fff;fill-opacity:0.5;}
.jssorb053 .i:hover .b {fill-opacity:.7;}
.jssorb053 .iav .b {fill-opacity: 1;}
.jssorb053 .i.idn {opacity:.3;}

.jssora055 {display:block;position:absolute;cursor:pointer;}
.jssora055 .a {fill:none;stroke:#fff;stroke-width:960;stroke-miterlimit:10;}
.jssora055:hover {opacity:.8;}
.jssora055.jssora055dn {opacity:.5;}
.jssora055.jssora055ds {opacity:.3;pointer-events:none;}
</style>
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1223px;height:622px;ov erflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;heig ht:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
<img style="margin-top:-19px;position:relative;top:50%;width:38px;height:3 8px;" src="Images/spin.svg" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px; width:1223px;height:622px;overflow:hidden;">
<div data-p="230.625">
<img data-u="image" src="Images/carousel_slide1.2.png" />
</div>
<div data-p="230.625">
<img data-u="image" src="Images/carousel_slide2.png" />
</div>
<div data-p="230.625">
<img data-u="image" src="Images/carousel_slide3.jpg" />
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb053" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
<div data-u="prototype" class="i" style="width:16px;height:16px;">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:1 00%;">
<path class="b" d="M11400,13800H4600c-1320,0-2400-1080-2400-2400V4600c0-1320,1080-2400,2400-2400h6800 c1320,0,2400,1080,2400,2400v6800C13800,12720,12720 ,13800,11400,13800z"></path>
</svg>
</div>
</div>
<!-- Arrow Navigator -->
<div data-u="arrowleft" class="jssora055" style="width:55px;height:55px;top:0px;left:25px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:1 00%;">
<polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
</svg>
</div>
<div data-u="arrowright" class="jssora055" style="width:55px;height:55px;top:0px;right:25px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:1 00%;">
<polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
</svg>
</div>
</div>
</div>
</div>
<!-- #endregion Jssor Slider End -->

</div>

<main>
<div class="row">
<div class="col col-md-one-half">
<div class="info-box-tan">
<h2>Inspiring Reads</h2>
<p>The future is in the lightening of our footprings and the brightening of our lives.</p>
</div>
</div>
<div class="col col-md-one-half">
<div class="info-box-dark">
<h2>Reflections</h2>
<p>The future is in the lightening of our footprings and the brightening of our lives.</p>
</div>
</div>
</div>
<div class="row">
<div class="col col-md-one-half col-lg-one-fourth"><img src="Images/PoolTable_Final_CROPPED_2.jpg" alt="PoolTable"></div>
<div class="col col-md-one-half col-lg-one-fourth"><img src="Images/Nativity2.jpg" alt="PoolTable"></div>
<div class="col col-md-one-half col-lg-one-fourth"><img src="Images/MainMenu.jpg" alt="PoolTable"></div>
<div class="col col-md-one-half col-lg-one-fourth"><img src="Images/Settings.jpg" alt="PoolTable"></div>
</div>
</main>


<footer>
<div class="row">
<div class="col">
<p class="footer-text"> 2018 Justin Grajek. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>


CSS:

@charset "utf-8";
/* CSS Document */

html,
html * {
padding: 0 ;
margin: 0;
box-sizing: border-box;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

header {
padding: 10px;
}

img {
width: 100;
max-width: 100%;
height: auto;
vertical-align: middle;
}

footer {
padding: 20px 30px;
background-color: #231f20;
color: #f7f7f7;
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
text-align: center;
}

body {
margin-left: auto;
margin-right: auto;
}

.style-logo {
margin-left: auto;
margin-right: auto;
display: block;
}

.style-nav ul {
list-style-type: none;
}

.style-nav ul li a {
text-decoration: none;
color: #231f20;
display: inline;
text-transform: uppercase;
padding-left: 20px;
padding-right: 20px;
}

.row:before, .row:after {
content: "";
display: table;
}

.row:after {
clear:both;
}

.blackbox {
background-color: #231f20;
color: #f7f7f7;
text-align: center;
padding-left: 20px;
padding-right: 20px;
height: auto;
width: 100%;
}

.carousel {
width: 100%;
height: 100%;
}

h1 {
font-size: 57px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}

h2 {
font-size: 30px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 60px;
}

h3 {
font-size: 16px;
text-transform: uppercase;
font-weight: 200;
margin-bottom: 120px;
}

h4 {
font-size: 16px;
font-weight: 200;
margin-bottom: 120px;
}

p {
font-size: 16px;
font-weight: 400px;
margin-bottom: 35px
}

.button {
border: 2px #f7f7f7 solid;
padding: 8px 30px;
border-radius: 30px;
color: #f7f7f7;
text-decoration: none;
}

.info-box-tan {
background-color: #f7f7f7;
color: #231f20;
padding: 30px 20px 60px;
text-align: center;
}

.info-box-dark {
background-color: #f7f7f7;
color: #231f20;
padding: 30px 20px 60px;
text-align: center;
}

.footer-text {
font-size: 13px;
margin-bottom: 20px;
}


/*Tablet View*/

@media (min-width: 768px){

body {
max-width: 778px;
background-color: #f7f7f7;
}

.style-nav ul li {
display: inline-block;
}

.style-nav ul {
text-align: center;
}

h1 {
font-size: 40px;
margin-bottom: 90px;
}

h2 {
font-size: 40px;
margin-bottom: 90px;
}

h2 {
font-size: 40px;
margin-bottom: 90px;
}

h3 {
font-size: 40px;
margin-bottom: 90px;
}

h4 {
font-size: 40px;
margin-bottom: 90px;
}

.blackbox {
background-color: #231f20;
color: #f7f7f7;
text-align: center;
padding-right: 20px;
padding-left: 20px;
height: auto;
width: auto;
}

.carousel {
height: auto;
width: auto;
}
}






/*Desktop View*/

@media (min-width: 1130px){

.style-logo {
float: left;
padding-left: 20px;
}

.style-nav {
float: right;
list-style-type: none;
padding-top: 13px;
}

header {
padding-right: 150px;
padding-left: 150px;
}

body {
max-width: 100%;
background-color: #f7f7f7;
}

.blackbox {
background-color: #231f20;
color: #f7f7f7;
text-align: center;
padding-left: 20px;
padding-right: 20px;
height: auto;
width: auto;
}
}

edbr
01-09-2018, 12:35 AM
try
@media (min-width: 768px){

set a maximum width or it will conflict with the desktop settings

Justintime9
01-10-2018, 04:20 PM
Thanks! That did the trick.

Now another question, involving jquery. I used this (http://slicknav.io/) site to add a hamburger dropdown for my mobile version. However, I'm having some trouble formatting it in a way that I like.

Here's how it looks now:

http://imghst.co/97/rFZONpDST8.jpg

But what I'd like to do is have the hamburger go to the right of the logo. However based on my html (the .style-logo class specifically) that would be somewhat difficult.

<header>
<div class="row">
<div class="col">
<img class="style-logo" src="Images/JG_Logo_Mobile.png" alt="Justin Grajek Logo">
<nav class="style-nav">
<ul id="menu">
<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav_Portfolio','','Images/nav_Portfolio_mouseover.png',1)"><img id="nav_Portfolio" src="Images/nav_Portfolio.png" alt="This links to the portfolio page"></a></li>

<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav_Resume','','Images/nav_Resume_mouseover.png',1)"><img id="nav_Resume" src="Images/nav_Resume.png" alt="This links to the Resume page"></a></li>

<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav_Blog','','Images/nav_Blog_mouseover.png',1)"><img id="nav_Blog" src="Images/nav_Blog.png" alt="This links to the Blog page"></a></li>

<li><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav_Contact','','Images/nav_Contact_mouseover.png',1)"><img id="nav_Contact" src="Images/nav_Contact.png" alt="This links to the contact page"></a></li>

<a href="https://www.linkedin.com/in/justin-grajek-a4624043/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('soc_LinkedIn','','Images/soc_LinkedIn_rollover.png',1)"><img id="soc_LinkedIn" src="Images/soc_LinkedIn.png" alt="This links to my LinkedIn page"></a>

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('soc_Instagram','','Images/soc_Instagram_rollover.png',1)"><img id="soc_Instagram" src="Images/soc_Instagram.png" alt="This links to my Instagram page"></a>
</ul>
</nav>
</div>
</div>
</header>

My thought is to make the logo referenced above disappear with a simple "display: none" on mobile. But then the issue is how to get it in the JQuery.

;(function ($, document, window) {
var
// default settings object.
defaults = {
label: '',
duplicate: true,
duration: 200,
easingOpen: 'swing',
easingClose: 'swing',
closedSymbol: '►',
openedSymbol: '▼',
prependTo: 'body',
appendTo: '',
parentTag: 'a',
closeOnClick: false,
allowParentLinks: false,
nestedParentLinks: true,
showChildren: false,
removeIds: true,
removeClasses: false,
removeStyles: false,
brand: '',
animations: 'jquery',
init: function () {},
beforeOpen: function () {},
beforeClose: function () {},
afterOpen: function () {},
afterClose: function () {}
},
mobileMenu = 'slicknav',
prefix = 'slicknav',

Keyboard = {
DOWN: 40,
ENTER: 13,
ESCAPE: 27,
LEFT: 37,
RIGHT: 39,
SPACE: 32,
TAB: 9,
UP: 38,
};

"Label:" is where any text I might want to add by the hamburger would go, but I haven' the foggiest how to reference an image, let alone format the JQuery bar to be big enough to fit it.

Note: that's only the part of the .js file I thought relevant, but if it helps to see the whole thing I'll post it.

edbr
01-12-2018, 04:06 AM
i would offer taht you make a different logo for mobile maybe with your name under the logo design and if smaller the menu hambuger will sit mext to it. tou cans specify the image in the mwedia query, would that work for you?