4 Replies - 281 Views - Last Post: 01 July 2020 - 09:43 AM

#1 Bobby_Bubbles   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 381
  • Joined: 13-March 18

css desktop not centering grid

Posted 28 June 2020 - 08:33 AM

Here is the code i got.

<html><head><title>piHosting</title><meta name="description" content="..."><link rel="icon" href="/favicon.ico" type="image/x-icon"/><link rel="stylesheet" href="css/all.css"><link rel="stylesheet" href="css/w3.css"><link rel="stylesheet" href="css/fa.css"><link rel="stylesheet" href="css/structure.css"><meta name="theme-color" content="#C51A4A" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><script type="text/javascript">
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>
</head><body><div class="website">
	<div class="stickytop">
		<div class="header">
			<div class="header-layout">
				<div class="logo">Logo</div>
				<div class="nav">
					<div class="nav-mobile">
						<a onclick="myFunction()"><i class="fas fa-bars"></i></a>
						<div id="myDIV" class="speech" style="display: none;">
							<ul>
								<li><a href="products.php">Products</a></li>
							</ul>
						</div>
					</div>
					<div class="nav-desktop">
						<ul>
							<li><a href="products.php">Products</a></li>
						</ul>
					</div>
				</div>
				<div class="account"><i class="fa fa-user-circle-o" aria-hidden="true"></i></div>
			</div>
		</div>
	</div>
	<div class="content">Hi<br/><br/><br/><br/><br/><br/>Hi<br/><br/><br/><br/><br/><br/>Hi<br/><br/><br/><br/><br/><br/>Hi<br/><br/><br/><br/><br/><br/>Hi<br/><br/><br/><br/><br/><br/>Hi<br/><br/><br/><br/><br/><br/></div>
	<div class="stickybottom">
		<div class="footer">Testing footer</div>
	</div>
</div></body></html>



and the css

body{
	background-color: white;
	margin: 0px;
}
.stickytop{
    position: sticky;
    top: 0;
	background-color: white;
}
.stickybottom{
    position: sticky;
    bottom: 0;
    background-color: #C51A4A;
}
.website{
	display: grid;
	#grid-template-rows: 10% auto 10%;
	#width: 100%;
	#border: 1px solid black;
	background-color: grey;
}
.website > div{
	#padding: 10px;
	border: 1px solid black;
}
.header{
	grid-row: 1;
	min-width: 100%;
	background-color: red;
	padding: 10px;
	font-size: 32px;
	grid-template-columns: 30% 40% 30%;
}
.header-layout{
	display: grid;
	align-items: center;
}
.logo{
	grid-row: 1;
	grid-column: 2;
	justify-self: center;
}
.nav{
	grid-row: 1;
	grid-column: 1;
	justify-self: start;
	padding-left: 50px;
}
.nav-mobile{
	display: block;
}
.nav-desktop{
	display: none;
}
.account{
	grid-row: 1;
	grid-column: 3;
	justify-self: end;
	padding-right: 50px;
}
.content{
	grid-row: 2;
	border: 1px solid black;
	padding: 10px;
	height: 100%;
	background-color: green;
}
.footer{
	grid-row: 3;
	#border: 1px solid black;
	width: 100%;
	padding: 10px;
	text-align: center;
	justify-self: center;
	font-size: 32px;
	background-color: blue;
}
.speech {
	position: absolute;
	left: 40px;
	top: 100px;
	font-family: arial;
	font-size: 24px;
	background: white;
	color: #666666;
	border-radius: 5px;
	padding: 10px;
	max-width: 400px;
}
.speech::after {
  /* [THESE WILL CREATE THE TRIANGLE] */
	content: '';
	border: 10px solid transparent;
	border-bottom-color: white;
	border-top: 0;

  /* [THESE WILL POSITION THE TRIANGLE] */
	position: absolute;
	top: -10px;
	left: 40px;
	margin-left: -20px;
}
ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
@media only screen and (min-width: 1000px) {
	.website{
		display: grid;
		max-width: 670px;
		background-color: yellow;
		justify-items: stretch;
		justify-content: center;
	}
	.website > div{
		width: 670px;
	}
	.header{
		grid-row: 1;
	}
	.header-layout{
		display: grid;
	}
	.logo{
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		grid-width: 100px;
	}
	.nav{
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		padding-left: unset;
	}
	.account{
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
	}
	.nav-mobile{
		display: none;
	}
	.nav-desktop{
		display: block;
	}
	.content{
		grid-row: 2;
		grid-column: 1;
	}
	.footer{
		grid-row: 3;
		grid-column: 1;
	}
}



im just learning grids and havent quite mastered it but here we go. the mobile version works fine but when i go to desktop >1000px the structure is somewhat maintained but the problem is i cant center it on the page as a whole. i thought inside container you put in justify-content: center; and it does it...is there a css property conflicting with this?

This post has been edited by Bobby_Bubbles: 28 June 2020 - 08:34 AM


Is This A Good Question/Topic? 0
  • +

Replies To: css desktop not centering grid

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15741
  • View blog
  • Posts: 63,062
  • Joined: 12-June 08

Re: css desktop not centering grid

Posted 28 June 2020 - 12:17 PM

Yup.. so you need to tweak the '@media' tag.

https://www.w3school..._mediaquery.asp
https://www.w3school...ediaqueries.asp
https://developer.mo...g_media_queries

If you don't want to have different styles kicking off at different sizes, comment out this line so it looks like this:
        /*@media only screen and (min-width: 1000px) */

Was This Post Helpful? 0
  • +
  • -

#3 Bobby_Bubbles   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 381
  • Joined: 13-March 18

Re: css desktop not centering grid

Posted 28 June 2020 - 03:09 PM

that doesnt tell me anything. by commenting out im effectively remomving the desktop resolution. i want to keep that. the issue is that the entire "website" grid is placed tot he left when it should be placed to the center because of justify-content: center;
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15741
  • View blog
  • Posts: 63,062
  • Joined: 12-June 08

Re: css desktop not centering grid

Posted 28 June 2020 - 10:39 PM

That's part of the issue is media tags, when applied too early, get things mixed up.

If you are trying to center a div on the page, then setting a width, and margin left/right to auto does the trick.

justify content works with a flex display as it's part of the 'flex box layout'. If you don't want a flex box then you need to ponder what you are doing.

https://css-tricks.c...ustify-content/
Was This Post Helpful? 2
  • +
  • -

#5 Bobby_Bubbles   User is offline

  • D.I.C Regular

Reputation: 1
  • View blog
  • Posts: 381
  • Joined: 13-March 18

Re: css desktop not centering grid

Posted 01 July 2020 - 09:43 AM

View Postmodi123_1, on 28 June 2020 - 10:39 PM, said:

That's part of the issue is media tags, when applied too early, get things mixed up.

If you are trying to center a div on the page, then setting a width, and margin left/right to auto does the trick.

justify content works with a flex display as it's part of the 'flex box layout'. If you don't want a flex box then you need to ponder what you are doing.

https://css-tricks.c...ustify-content/


but i was using grid.

https://css-tricks.c...ete-guide-grid/

margin: auto; worked fine btw.

This post has been edited by Bobby_Bubbles: 01 July 2020 - 01:21 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1