Good morning,
I apologize for whatever inability I might have to put this into the proper terms. I have a website that I laid out in InDesign. You can find the general layout as a PNG image here (you can click on the “broken” image link to see it):
My site is starting to come along, but there seems to be a long way to go. It looks like this so far:
http://www.markallanholley.com/index.html
I suppose that I’m just looking for general advice about the CSS Grid layout so that I can bring the HTML page more in line with the PNG that I designed in InDesign. I really wish that I could be more specific. As you can see, the left side is far too small, width-wise, while the right side with the example image, (a robot in this case), is far too large and is not responsive.
You’re welcome to view the source at the HTML page and I’ll post my CSS below so that you don’t have to dig around in Inspector. If anyone can help at all I’d really appreciate, even if it’s just to steer me in the direction of what question(s) I should be asking. Thank you much.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
padding: 10% 10%;
font-size: 110%;
font-family: 'Work Sans', sans-serif;
}
nav li {
display: inline-block;
list-style: none;
}
footer li {
display: inline-block;
list-style: none;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10px, 3fr));
grid-template-rows: 1fr, 80%, 1fr;
grid-row-gap: 5px;
grid-column-gap: 5px;
}
.top {
grid-row: 1 / span 1;
grid-column: 1 / span 3;
}
.leftsection {
grid-row: 2 / span 1;
grid-column: 1 / span 1;
}
.divider {
grid-row: 2 / span 1;
grid-column: 2 / span 1;
}
.rightsection {
grid-row: 2 / span 1;
grid-column: 3 / span 1;
}
.bottom {
grid-row: 3 / span 1;
grid-column: 1 / span 3;
}
img:hover {
transform: scale(1.1);
}
/* unvisited link */
a:link {
color: black;
font-weight: bold;
text-decoration: none;
}
/* visited link */
a:visited {
color: gray;
font-weight: bold;
text-decoration: none;
}
/* mouse over link */
a:hover {
color: purple;
font-weight: bold;
text-decoration: none;
}
/* selected link */
a:active {
color: lightpurple;
font-weight: bold;
text-decoration: none;
}
/* Fonts from Google Fonts */
/*
font-family: 'Forum', cursive;
font-family: 'Patua One', cursive;
font-family: 'Work Sans', sans-serif;
*/