Hello everyone,
This is my first post; thank you for hosting this forum, allowing a platform for the growth of skill and understanding.
I hope I may ask a question about an issue that I fail myself to resolve; I'm not entirely new to HTML/CSS, and yet should still be considered a neophyte. I hope your more seasoned eyes will be able to detect my error and help me out.
I'm trying to create a simple one-page website, displaying some philosophical texts I have written. The mock-layout I will refer to in this post does not display any actual content, publications or active links, not wishing to unintendedly spam my humble sophist ramblings ;-).
The setup is this: There is a span (class publications) that holds the centered-text "Publications."
Below that is a span (class booktitle), holding the left-aligned title of a publication.
Below that is a parent-div (class divContainer )that contains two child-divs.
One child-div (class bookDescription) holds the description of a publication. The second child-div (class bookImage) holds an image of the cover of a publication.
The media query @media screen and (min-width: 768px) ensures the the book titles are aligned left on a laptop/PC, with the book description and book cover aligned next to one-another. When the screen is smaller that 786px, the book titles, the book description, and the book cover are all aligned centered; with the book description and book cover being placed below one-another.
All of this works fine on my laptop, and using Brave-inspect everything tested well for mobile devices. However, having used the library computer, having a rather large monitor, I saw that the span holding the book titles is aligned too much to the left relative to the divs below them. I could not understand what I was doing wrong, and must be lost in the rather vast diversity of CSS solutions and modes of formatting. Or my brain failed to understand some obvious percentages/numeral values. Edit: I just found out my issue has to do with the Windows display settings. Under "Scale and Layout" it is apparently a standard that the scale is set to 125%. On 125%, my layout works fine; but when the scale is set to 100%, I get the aforementioned issue of the book titles aligning too much to the left relative to the div container, and the two child-divs.
This is the HTML-file; this the CSS.
How the layout appears on a small screen: image.
How the layout is intended on a big screen: image, and how it is indeed displayed on my laptop.
How the layout appears on the large monitors of my library: image.
CSS-class publications (not altered after/within @media screen and (min-width: 768px)):
.publications{font-size: 23px; display: block; margin: auto; width: 50%; text-align: center;}
CSS-class divContainer before @media screen and (min-width: 768px):
.divContainer{
/*border-style: solid;
border-color: black;*/
border-width: 5px;
width: 90%;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
CSS-class divContainer after/within @media screen and (min-width: 768px):
.divContainer{
flex-wrap: nowrap; width: 60%;}
Flex-wrap: wrap has been set to nowrap; width has been changed from 90% to 60%.
CSS-class bookDescription before @media screen and (min-width: 768px):
.bookDescription{
margin: 5px;
/*border-style: dashed;
border-color: darkgrey;*/
display: block;
width: 90%;
margin-bottom: 30px;
}
CSS-class bookDescription after/within @media screen and (min-width: 768px):
.bookDescription{width: 60%;}
Width has been changed from 90% to 60%.
CSS-class bookImage before @media screen and (min-width: 768px):
.bookImage{
/*border-style: dashed;
border-color: darkgrey;*/
margin: 5px;
display: flex;
max-width: 201px;
text-align: center;
justify-content: center;
}
CSS-class bookImage after/within @media screen and (min-width: 768px):
.bookImage{
justify-content: left;
float: left;}
Justify-content has been changed from center to left. A float: left has been added.
I would be most grateful for your help!
Snowfall
