logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 01-08-2018, 08: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
Old 01-08-2018, 11:35 PM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,203
Default

try
@media (min-width: 768px){

set a maximum width or it will conflict with the desktop settings
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 01-10-2018, 03:20 PM   #3
Justintime9
 
Join Date: Jun 2017
Posts: 6
Default

Thanks! That did the trick.

Now another question, involving jquery. I used this 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:



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.

HTML Code:
	<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.

Code:
;(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.
Justintime9 is offline   Reply With Quote
Old 01-12-2018, 03:06 AM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,203
Default

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?
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:28 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com