Seeking guidance as a beginner coder to master bootstrap 4 scaling. Struggling with proper box scaling down after investing 12 hours into it using various methods like Ul Li and div containers.
If anyone can shed light on where I'm going astray, it would be immensely appreciated.
I've added examples at the end showing how the page should appear across different screen sizes.
Many thanks,
Rob
/*
Colors:
#4aaaa5; <--teal
#ffffff; <--white
#777777; <--gray
*/
html,
body {
height: 100%;
width: 100%;
font-family: 'Poppins', 'sans-serif';
color: #222;
}
/* CSS classes and styles */
ul {
margin: 0 auto;
display: grid;
grid-template-columns: 35% 35%;
background-color: white;
list-style: none;
margin: 0 0 0 40px;
}
.footerLine {
background-color: #4aaaa5;
height: 70px;
width: 100%;
}
@media (max-width: 766px) {
/* Media query specific styles for smaller devices */
.robTitle {
margin-left: 0;
margin-right: 0;
padding-top: 20px;
padding-bottom: 20px;
width: 100%;
}
.navbarLinks {
justify-content: center;
width: 100%;
}
.contentBack {
background-color: #ffffff;
height: 100%;
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-top: 110px;
}
.robImage {
width: 100%;
height: auto;
align-content: center;
}
.contentText {
word-spacing: .25em;
line-height: 1.5em;
}
}