View Single Post
Old 01-08-2018, 09:27 PM   #1
Justintime9
 
Join Date: Jun 2017
Posts: 6
Default Responsivity Problems

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:



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



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:

HTML Code:
<!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;overflow:hidden;visibility:hidden;">
						<!-- Loading Screen -->
						<div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
							<img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" 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:100%;">
									<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:100%;">
								<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:100%;">
								<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:

HTML Code:
@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;
	}
}
Justintime9 is offline   Reply With Quote