[RESOLVED] clashing styles

cluelessPHP · Oct 17, 2017

I'm using media queries but the styles keep overwriting each other, is there anything I can do to stop that?

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video 
{
 	margin:0;
 	padding:0;
 	border:0;
 	outline:0;
 	font-size:100%;
 	vertical-align:baseline;
 	background:transparent;
  	font-family:Verdana,Geneva,sans-serif;
}
*{
	margin: 0;
	padding: 0;
}
body
{
	background-color: #e9ebee;
}
.mainNav
{
	width:100%;
	background-color: #ffffff;
	overflow: hidden;
	border-bottom:1px solid #9a9696;
	position: fixed;
    left: 0px;
    top: 0;
    z-index: 100;
}

ul
{
	list-style-type:none;
}

input[type=text], input[type=password] 
{
    border:1px solid #000000;
	padding: 3px;
}

input:focus 
{ 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

.leftNav h2 a 
{
	text-decoration: none;
	color: #000000;
}

input[type=submit]
{
	background-color:#6ea8da;
	 color: #fff;
	 cursor:pointer;
	 outline: none;
 }

input[type=submit]:hover
{
	background-color:#6e85da;
}	

.mainControl
{
	background-color: #ffffff;
	height:100%;
	position: absolute;
	z-index: 10;
	overflow: hidden;
	display: none;
}

.menuList
{
	font-weight: bold;
}

/*==========  Mobile First Method  ==========*/
/* Custom, iPhone Retina */
@media only screen and (max-width: 320px)
{
	.leftNav
	{
		min-width: 60%;
		float: left;
	}

.leftNav h2
{
	margin: 20px;
}

.rightNav
{
	display: none;
}

.hamIcon
{
	font-size: 30px;
	float: left;
	margin: 10px;
	color:  #000000;
}

.mainControl
{
	max-width:30%;
	overflow:hidden;
}

.spacing > li
{
	padding:10px;
	border-bottom:1px solid #8a8888;
}

.mainwrapper
{
	width:90%;
	margin-top: 30px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right:auto;
	height: auto;
	overflow: hidden;
}

.containIndex
{
	width: 100%;
}

.imgwrapper
{
	width: 100%;
	height: 20%;
	margin: 20px;
	overflow: hidden;
	float:left;
}

.imgplace img
{
	width: 87%;
	height: 200px;
	overflow: hidden;
}

.meaning
{
	width: 100%;
	margin: 7px;
	text-align: center;
}

.textHolder
{
	text-align: center;
	width: 86%;
	padding: 5px;

}


}

@media only screen and (min-width: 321px) and (max-width: 479px)
{
	.leftNav
	{
		min-width: 50%;
		float: left;
	}

.leftNav h2
{
	margin: 20px;
}

.rightNav
{
	display: none;
}

.hamIcon
{
	font-size: 30px;
	float: left;
	margin: 10px;
	color:  #000000;
}

.mainControl
{
	max-width:30%;
	overflow:hidden;
	height:100vh;
	position: fixed;
}

.spacing > li
{
	padding:10px;
	border-bottom:1px solid #8a8888;
}

.mainwrapper
{
	width:90%;
	margin-top: 30px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right:auto;
	height: auto;
	overflow: hidden;
}

.containIndex
{
	width: 100%;
}

.imgwrapper
{
	width: 100%;
	height: 20%;
	margin: 20px;
	overflow: hidden;
	float:left;
}

.imgplace img
{
	width: 87%;
	height: 200px;
	overflow: hidden;
}

.meaning
{
	width: 100%;
	margin: 7px;
	text-align: center;
}

.textHolder
{
	text-align: center;
	width: 86%;
	padding: 5px;

}



}
/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) 
{


}
/* Small Devices, Tablets */

@media only screen and (min-width: 768px) 
{

.leftNav
{
	min-width: 60%;
	float: left;
}

.leftNav h2
{
	margin: 20px;
	font-size: 43px;
}

.rightNav
{
	display: none;
}

.hamIcon
{
	font-size: 50px;
	float: left;
	margin: 10px;
	color:  #000000;
}

.mainControl
{
	max-width:30%;
	overflow:hidden;
	height:100%;
}

.spacing > li
{
	padding:10px;
	border-bottom:1px solid #8a8888;
}

.mainwrapper
{
	width:90%;
	margin-top: 30px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right:auto;
	height: auto;
	overflow: hidden;
}

.containIndex
{
	width: 100%;
}

.imgwrapper
{
	width: 100%;
	height: 20%;
	margin: 20px;
	overflow: hidden;
	float:left;
}

.imgplace img
{
	width: 95%;
	height: 380px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

.meaning
{
	width: 97%;
	margin: 7px;
	text-align: center;
	font-size: 40px;
}

.textHolder
{
	text-align: center;
	width: 92%;
	padding: 5px;
	font-size: 30px;

}


}
/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) 
{

}
/* Large Devices, Wide Screens */

@media only screen and (min-width: 1200px) 
{
	.hamIcon
	{
		float:left;
		cursor: pointer;	
	}

.hamIcon:hover
{
	color:#c6ced9;
}

.leftNav
{
	min-width: 50%;
	float: left;
}

.leftNav h2
{
	margin: 20px;
}

.rightNav
{
	min-width: 50%;
	float: left;
}

.innerRightNav
{
	margin: 20px;
	float: right;
}

.formControl
{
	float:left;
	margin-left: 10px;
}

.hamIcon
{
	font-size: 30px;
	margin: 10px;
}

.mainControl
{
	max-width:17%;
	overflow:hidden;
}

.spacing > li
{
	margin-bottom: 20px;
	padding:10px;
	border-bottom:1px solid #8a8888;
}

.mainwrapper
{
	width:70%;
	margin-top: 30px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right:auto;
	height: auto;
	overflow: hidden;
}

.containIndex
{
	width: 99%;
	margin-left: auto;
	margin-right: auto;
}

.imgwrapper
{
	width: 20%;
	height: 20%;
	margin: 20px;
	overflow: hidden;
	float:left;
}

.imgplace img
{
	width: 100%;
	height: 150px;
	overflow: hidden;
}

.meaning
{
	width: 100%;
	margin: 7px;
	text-align: center;
}

.textHolder
{
	text-align: center;
}

/*register style*/

.registerHeading
{
	width:100%;
	text-align: center;
}
}

cluelessPHP · Oct 17, 2017

Well I'm playing around with it and I don't like the answer I found insert random complaint here

cluelessPHP · Oct 17, 2017

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video 
{
 	margin:0;
 	padding:0;
 	border:0;
 	outline:0;
 	font-size:100%;
 	vertical-align:baseline;
 	background:transparent;
  	font-family:Verdana,Geneva,sans-serif;
}
*{
	margin: 0;
	padding: 0;
}
body
{
	background-color: #e9ebee;
}
.mainNav
{
	width:100%;
	background-color: #ffffff;
	overflow: hidden;
	border-bottom:1px solid #9a9696;
}

ul
{
	list-style-type:none;
}

input[type=text], input[type=password] 
{
    border:1px solid #000000;
	padding: 3px;
}

input:focus 
{ 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

.leftNav h2 a 
{
	text-decoration: none;
	color: #000000;
}

input[type=submit]
{
	background-color:#6ea8da;
	 color: #fff;
	 cursor:pointer;
	 outline: none;
 }

input[type=submit]:hover
{
	background-color:#6e85da;
}	

.mainControl
{
	background-color: #ffffff;
	height:100%;
	position: absolute;
	z-index: 10;
	overflow: hidden;
	display: none;
}

.menuList
{
	font-weight: bold;
}

/*==========  Mobile First Method  ==========*/
/* Custom, iPhone Retina */
@media only screen and (max-width: 320px)
{
	.mainNav
	{
		position: fixed;
		left: 0px;
		top: 0;

}
.leftNav
{
	min-width: 60%;
	float: left;
}

.leftNav h2
{
	margin: 20px;
}

.rightNav
{
	display: none;
}

.hamIcon
{
	font-size: 30px;
	float: left;
	margin: 10px;
	color:  #000000;
}

.mainControl
{
	max-width:30%;
	overflow:hidden;
}

.spacing > li
{
	padding:10px;
	border-bottom:1px solid #8a8888;
}

.mainwrapper
{
	width:90%;
	margin-top: 65px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right:auto;
	height: auto;
	overflow: hidden;
}

.containIndex
{
	width: 100%;
}

.imgwrapper
{
	width: 100%;
	height: 20%;
	margin: 20px;
	overflow: hidden;
	float:left;
}

.imgplace img
{
	width: 87%;
	height: 200px;
	overflow: hidden;
}

.meaning
{
	width: 98%;
	margin: 7px;
	text-align: center;
	font-size: 12px;
}

.textHolder
{
	text-align: center;
	width: 86%;
	padding: 5px;

}


}

@media only screen and (min-width: 321px) and (max-width: 479px)
{
	.leftNav
	{
		min-width: 50%;
		float: left;
	}

.leftNav h2
{
	margin: 20px;
}

.rightNav
{
	display: none;
}

.hamIcon
{
	font-size: 30px;
	float: left;
	margin: 10px;
	color:  #000000;
}

.mainControl
{
	max-width:30%;
	overflow:hidden;
	height:100vh;
	position: fixed;
}

.spacing > li
{
	padding:10px;
	border-bottom:1px solid #8a8888;
}

.mainwrapper
{
	width:90%;
	margin-top: 30px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right:auto;
	height: auto;
	overflow: hidden;
}

.containIndex
{
	width: 100%;
}

.imgwrapper
{
	width: 100%;
	height: 20%;
	margin: 20px;
	overflow: hidden;
	float:left;
}

.imgplace img
{
	width: 87%;
	height: 200px;
	overflow: hidden;
}

.meaning
{
	width: 96%;
	margin: 7px;
	text-align: center;
	font-size: 14px;
}

.textHolder
{
	text-align: center;
	width: 86%;
	padding: 5px;

}



}
/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) 
{


}
/* Small Devices, Tablets */

@media only screen and (min-width: 768px) 
{

.leftNav
{
	min-width: 60%;
	float: left;
}

.leftNav h2
{
	margin: 20px;
	font-size: 43px;
}

.rightNav
{
	display: none;
}

.hamIcon
{
	font-size: 50px;
	float: left;
	margin: 10px;
	color:  #000000;
}

.mainControl
{
	max-width:30%;
	overflow:hidden;
	height:100%;
}

.spacing > li
{
	padding:10px;
	border-bottom:1px solid #8a8888;
}

.mainwrapper
{
	width:90%;
	margin-top: 30px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right:auto;
	height: auto;
	overflow: hidden;
}

.containIndex
{
	width: 100%;
}

.imgwrapper
{
	width: 100%;
	height: 20%;
	margin: 20px;
	overflow: hidden;
	float:left;
}

.imgplace img
{
	width: 95%;
	height: 380px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

.meaning
{
	width: 97%;
	margin: 7px;
	text-align: center;
	font-size: 30px;
}

.textHolder
{
	text-align: center;
	width: 92%;
	padding: 5px;
	font-size: 30px;

}


}
/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) 
{

}
/* Large Devices, Wide Screens */

@media only screen and (min-width: 1200px) 
{

.hamIcon
{
	float:left;
	cursor: pointer;	
}

.hamIcon:hover
{
	color:#c6ced9;
}

.leftNav
{
	min-width: 50%;
	float: left;
}

.leftNav h2
{
	margin: 20px;
	font-size:20px;
}

.rightNav
{
	min-width: 50%;
	float: left;
}

.innerRightNav
{
	margin: 20px;
	float: right;
}

.formControl
{
	float:left;
	margin-left: 10px;
}

.hamIcon
{
	font-size: 30px;
	margin: 10px;
}

.mainControl
{
	max-width:17%;
	overflow:hidden;
}

.spacing > li
{
	margin-bottom: 20px;
	padding:10px;
	border-bottom:1px solid #8a8888;
}

.mainwrapper
{
	width:70%;
	margin-top: 30px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right:auto;
	height: auto;
	overflow: hidden;
}

.containIndex
{
	width: 99%;
	margin-left: auto;
	margin-right: auto;
}

.imgwrapper
{
	width: 20%;
	height: 20%;
	margin: 20px;
	overflow: hidden;
	float:left;
}

.imgplace img
{
	width: 100%;
	height: 150px;
	overflow: hidden;
}

.meaning
{
	width: 100%;
	margin: 7px;
	text-align: center;
}

.textHolder
{
	text-align: center;
	font-size: 20px;
}

/*register style*/

.registerHeading
{
	width:100%;
	text-align: center;
}
}

@media only screen 
and (min-device-width: 1024px) 
and (max-device-width: 1366px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 1.5)
{ 
	.hamIcon
	{
		float:left;
		cursor: pointer;	
	}

.hamIcon:hover
{
	color:#c6ced9;
}

.leftNav
{
	min-width: 50%;
	float: left;
}

.leftNav h2
{
	margin: 20px;
	font-size:20px;
}

.rightNav
{
	min-width: 50%;
	float: left;
}

.innerRightNav
{
	margin: 20px;
	float: right;
}

.formControl
{
	float:left;
	margin-left: 10px;
}

.hamIcon
{
	font-size: 30px;
	margin: 10px;
}

.mainControl
{
	max-width:17%;
	overflow:hidden;
}

.spacing > li
{
	margin-bottom: 20px;
	padding:10px;
	border-bottom:1px solid #8a8888;
}

.mainwrapper
{
	width:70%;
	margin-top: 30px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right:auto;
	height: auto;
	overflow: hidden;
}

.containIndex
{
	width: 99%;
	margin-left: auto;
	margin-right: auto;
}

.imgwrapper
{
	width: 20%;
	height: 20%;
	margin: 20px;
	overflow: hidden;
	float:left;
}

.imgplace img
{
	width: 100%;
	height: 150px;
	overflow: hidden;
}

.meaning
{
	width: 100%;
	margin: 7px;
	text-align: center;
}

.textHolder
{
	text-align: center;
	font-size: 20px;
}

}

That sort of idea I guess seems ok, I have to admit front end developers with their fancy CSS and JS stuff does must do a lot more than I thought

dalecosp · Oct 20, 2017

cluelessPHP;11064335 wrote:

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video 
{
 	margin:0;
 	padding:0;
 	border:0;
 	outline:0;
 	font-size:100%;
 	vertical-align:baseline;
 	background:transparent;
  	font-family:Verdana,Geneva,sans-serif;
}
*{
	margin: 0;
	padding: 0;
}
body
{
	background-color: #e9ebee;
}
.mainNav
{
	width:100%;
	background-color: #ffffff;
	overflow: hidden;
	border-bottom:1px solid #9a9696;
}

ul
{
	list-style-type:none;
}

input[type=text], input[type=password] 
{
    border:1px solid #000000;
	padding: 3px;
}

input:focus 
{ 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

.leftNav h2 a 
{
	text-decoration: none;
	color: #000000;
}

input[type=submit]
{
	background-color:#6ea8da;
	 color: #fff;
	 cursor:pointer;
	 outline: none;
 }

input[type=submit]:hover
{
	background-color:#6e85da;
}	

.mainControl
{
	background-color: #ffffff;
	height:100%;
	position: absolute;
	z-index: 10;
	overflow: hidden;
	display: none;
}

.menuList
{
	font-weight: bold;
}

/*==========  Mobile First Method  ==========*/
/* Custom, iPhone Retina */
@media only screen and (max-width: 320px)
{
	.mainNav
	{
		position: fixed;
		left: 0px;
		top: 0;

}
.leftNav
{
	min-width: 60%;
	float: left;
}

.leftNav h2
{
	margin: 20px;
}

.rightNav
{
	display: none;
}

.hamIcon
{
	font-size: 30px;
	float: left;
	margin: 10px;
	color:  #000000;
}

.mainControl
{
	max-width:30%;
	overflow:hidden;
}

.spacing > li
{
	padding:10px;
	border-bottom:1px solid #8a8888;
}

.mainwrapper
{
	width:90%;
	margin-top: 65px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right:auto;
	height: auto;
	overflow: hidden;
}

.containIndex
{
	width: 100%;
}

.imgwrapper
{
	width: 100%;
	height: 20%;
	margin: 20px;
	overflow: hidden;
	float:left;
}

.imgplace img
{
	width: 87%;
	height: 200px;
	overflow: hidden;
}

.meaning
{
	width: 98%;
	margin: 7px;
	text-align: center;
	font-size: 12px;
}

.textHolder
{
	text-align: center;
	width: 86%;
	padding: 5px;

}


}

@media only screen and (min-width: 321px) and (max-width: 479px)
{
	.leftNav
	{
		min-width: 50%;
		float: left;
	}

.leftNav h2
{
	margin: 20px;
}

.rightNav
{
	display: none;
}

.hamIcon
{
	font-size: 30px;
	float: left;
	margin: 10px;
	color:  #000000;
}

.mainControl
{
	max-width:30%;
	overflow:hidden;
	height:100vh;
	position: fixed;
}

.spacing > li
{
	padding:10px;
	border-bottom:1px solid #8a8888;
}

.mainwrapper
{
	width:90%;
	margin-top: 30px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right:auto;
	height: auto;
	overflow: hidden;
}

.containIndex
{
	width: 100%;
}

.imgwrapper
{
	width: 100%;
	height: 20%;
	margin: 20px;
	overflow: hidden;
	float:left;
}

.imgplace img
{
	width: 87%;
	height: 200px;
	overflow: hidden;
}

.meaning
{
	width: 96%;
	margin: 7px;
	text-align: center;
	font-size: 14px;
}

.textHolder
{
	text-align: center;
	width: 86%;
	padding: 5px;

}



}
/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) 
{


}
/* Small Devices, Tablets */

@media only screen and (min-width: 768px) 
{

.leftNav
{
	min-width: 60%;
	float: left;
}

.leftNav h2
{
	margin: 20px;
	font-size: 43px;
}

.rightNav
{
	display: none;
}

.hamIcon
{
	font-size: 50px;
	float: left;
	margin: 10px;
	color:  #000000;
}

.mainControl
{
	max-width:30%;
	overflow:hidden;
	height:100%;
}

.spacing > li
{
	padding:10px;
	border-bottom:1px solid #8a8888;
}

.mainwrapper
{
	width:90%;
	margin-top: 30px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right:auto;
	height: auto;
	overflow: hidden;
}

.containIndex
{
	width: 100%;
}

.imgwrapper
{
	width: 100%;
	height: 20%;
	margin: 20px;
	overflow: hidden;
	float:left;
}

.imgplace img
{
	width: 95%;
	height: 380px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

.meaning
{
	width: 97%;
	margin: 7px;
	text-align: center;
	font-size: 30px;
}

.textHolder
{
	text-align: center;
	width: 92%;
	padding: 5px;
	font-size: 30px;

}


}
/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) 
{

}
/* Large Devices, Wide Screens */

@media only screen and (min-width: 1200px) 
{

.hamIcon
{
	float:left;
	cursor: pointer;	
}

.hamIcon:hover
{
	color:#c6ced9;
}

.leftNav
{
	min-width: 50%;
	float: left;
}

.leftNav h2
{
	margin: 20px;
	font-size:20px;
}

.rightNav
{
	min-width: 50%;
	float: left;
}

.innerRightNav
{
	margin: 20px;
	float: right;
}

.formControl
{
	float:left;
	margin-left: 10px;
}

.hamIcon
{
	font-size: 30px;
	margin: 10px;
}

.mainControl
{
	max-width:17%;
	overflow:hidden;
}

.spacing > li
{
	margin-bottom: 20px;
	padding:10px;
	border-bottom:1px solid #8a8888;
}

.mainwrapper
{
	width:70%;
	margin-top: 30px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right:auto;
	height: auto;
	overflow: hidden;
}

.containIndex
{
	width: 99%;
	margin-left: auto;
	margin-right: auto;
}

.imgwrapper
{
	width: 20%;
	height: 20%;
	margin: 20px;
	overflow: hidden;
	float:left;
}

.imgplace img
{
	width: 100%;
	height: 150px;
	overflow: hidden;
}

.meaning
{
	width: 100%;
	margin: 7px;
	text-align: center;
}

.textHolder
{
	text-align: center;
	font-size: 20px;
}

/*register style*/

.registerHeading
{
	width:100%;
	text-align: center;
}
}

@media only screen 
and (min-device-width: 1024px) 
and (max-device-width: 1366px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 1.5)
{ 
	.hamIcon
	{
		float:left;
		cursor: pointer;	
	}

.hamIcon:hover
{
	color:#c6ced9;
}

.leftNav
{
	min-width: 50%;
	float: left;
}

.leftNav h2
{
	margin: 20px;
	font-size:20px;
}

.rightNav
{
	min-width: 50%;
	float: left;
}

.innerRightNav
{
	margin: 20px;
	float: right;
}

.formControl
{
	float:left;
	margin-left: 10px;
}

.hamIcon
{
	font-size: 30px;
	margin: 10px;
}

.mainControl
{
	max-width:17%;
	overflow:hidden;
}

.spacing > li
{
	margin-bottom: 20px;
	padding:10px;
	border-bottom:1px solid #8a8888;
}

.mainwrapper
{
	width:70%;
	margin-top: 30px;
	background-color: #ffffff;
	margin-left: auto;
	margin-right:auto;
	height: auto;
	overflow: hidden;
}

.containIndex
{
	width: 99%;
	margin-left: auto;
	margin-right: auto;
}

.imgwrapper
{
	width: 20%;
	height: 20%;
	margin: 20px;
	overflow: hidden;
	float:left;
}

.imgplace img
{
	width: 100%;
	height: 150px;
	overflow: hidden;
}

.meaning
{
	width: 100%;
	margin: 7px;
	text-align: center;
}

.textHolder
{
	text-align: center;
	font-size: 20px;
}

}

That sort of idea I guess seems ok, I have to admit front end developers with their fancy CSS and JS stuff does must do a lot more than I thought

They copy and insert a lotta stuff, too; that first bit looks an awful lot like "CSS Reset" that was real popular a year or three back ...

<link rel='stylesheet' src='/assets/3rd_party/CSS_reset.css' type='text/css'>
<link rel='stylesheet' src='/css/style.css' type='text/css'>
<script src='/path/to/jQuery.js' async>
<!-- etc.    -->

cluelessPHP · Oct 20, 2017

dalecosp;11064341 wrote:
They copy and insert a lotta stuff, too; that first bit looks an awful lot like "CSS Reset" that was real popular a year or three back ...
<link rel='stylesheet' src='/assets/3rd_party/CSS_reset.css' type='text/css'>
<link rel='stylesheet' src='/css/style.css' type='text/css'>
<script src='/path/to/jQuery.js' async>

I guess I should put the reset in it's own file, I thought using css reset was a good thing no?

I finally got my index the way I like it mind you, I "think" it responds to every device out there

dalecosp · Oct 23, 2017

cluelessPHP;11064343 wrote:
I thought using css reset was a good thing no?

I guess so; please note that on this side of the pond "an awful lot" means "very much" instead of "a bad bunch of $stuff."

I meant to say "That code looks very much like CSS reset", not "using CSS reset is bad and you should be ashamed."

And my point was trying to be that some of that HARD WORK the front-end types do is actually just cut-and-paste from other people's work.

Not that some of that doesn't go on in the back-end, either. It's generally much more cost-efficient to use something that's already built if you can understand it and verify that there are no potential downsides in functionality, security, and company-bottom-line.

Weedpacket · Oct 23, 2017

dalecosp wrote:
And my point was trying to be that some of that HARD WORK the front-end types do is actually just cut-and-paste from other people's work.

Which is why it is so easy to find simple websites with simple layouts that have more than five hundred rules in their stylesheets, of which 50% don't match anything on the site, and 45% are overridden by the remaining 5%.

cluelessPHP · Oct 24, 2017

dalecosp;11064357 wrote:
I guess so; please note that on this side of the pond "an awful lot" means "very much" instead of "a bad bunch of $stuff."

I meant to say "That code looks very much like CSS reset", not "using CSS reset is bad and you should be ashamed."

Ohh that makes more sense :p

dalecosp;11064357 wrote:
And my point was trying to be that some of that HARD WORK the front-end types do is actually just cut-and-paste from other people's work.

Weedpacket ;11064357 wrote:
Which is why it is so easy to find simple websites with simple layouts that have more than five hundred rules in their stylesheets, of which 50% don't match anything on the site, and 45% are overridden by the remaining 5%.

Quite a few of my old class mates do this, the college didn't discourage it, "apparently" quite a few of them have jobs now via this copy and paste route

Right now I'm trying to figure out how to handle registering accounts

[RESOLVED] clashing styles

CcluelessPHP

CcluelessPHP

CcluelessPHP

dalecosp

CcluelessPHP

dalecosp

Weedpacket

CcluelessPHP