I've been experimenting with creating my own grid system using CSS, inspired by the simplicity of Bootstrap. You can check out the CodePen page where I've shared my progress. This is the CSS I've implemented:
/*
* light blue = 00AEEF
* dark blue = 1C75BC
* green = 8DC63F
* dark green = 009444
* orange = F7941E
* dark orange = F15A29
* brown = 594A42
*/
/***************************
****************************
Reset Styles
****************************
***************************/
@import 'normalize.css'
/* Change all elements to use border-box */
html{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after{
box-sizing: inherit;
}
/***************************
****************************
Base Styles
****************************
***************************/
body{
color: #414042 /* Dark Grey */
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
h1, h2, h3{
font-weight: bold;
}
a{
color: #8dc63f; /* Green */
font-weight: bold;
}
a:hover{
text-decoration: underline;
}
/***************************
****************************
Layout Styles
****************************
***************************/
.container{
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
max-width: 1170px;
}
.row{
margin-right: -15px;
margin-left: -15px;
}
/* ":after" is a pseudo-element (NOT a pseudo-class) */
.row::after{
content: "";
display: table;
clear: both;
}
/* This targets all classes that contain the word "col-" */
[class*='col-']{
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
/* Media query excludes extra-small devices and includes small and above */
@media (min-width: 48em) {
[class*='col-']{
float: left;
}
/* Column One Third */
.col-1-3{
width: 33.3333%;
background: red;
}
/* Column Two Thirds */
.col-2-3{
width: 66.6666%;
background: blue;
}
}
/***************************
****************************
Module Styles
****************************
***************************/
/***************************
****************************
Theme Styles
****************************
***************************/
.background-primary{
background: #F7941E; /* Orange */
}
.background-secondary{
background: #00AEEf; /* Blue */
}
.background-tertiary{
background: #8DC63F; /* Green */
}
This is the HTML code I'm using:
<header class="background-primary">
<div class="container">
Header Content
</div>
</header>
<main>
<section class="background-secondary">
<div class="container">
Hero Primary Content
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-1-3">
Circle Image
</div>
<div class="col-2-3">
Content Area
</div>
</div>
</div>
</section>
<section>
<div class="container">
Featured Content
</div>
</section>
<section class="background-primary">
<div class="container">
Testimonial Content
</div>
</section>
<section class="background-secondary">
<div class="container">
Media Objects
</div>
</section>
<section class="background-tertiary">
<div class="container">
More Content
</div>
</section>
</main>
<footer class="background-primary">
<div class="container">
Footer Content
</div>
</footer>
In IE and Edge browsers, both "Circle Image" and "Content Area" align horizontally as expected. However, when viewed in Chrome or Firefox, they stack vertically for some users. While it may be due to padding, what could be causing this discrepancy among browsers? Is there a common glitch reported for this issue?
(As a newcomer to web development, I apologize if this is a basic inquiry)