Snowfall
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Downloads
Gallery
Store
Posts posted by Snowfall
-
-
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
Div/Span Misalignment on Big Screens
in CSS
Posted · Edited by Snowfall
Thank you for your good advice; I'll have a look at your publication.
I managed to resolve the issue; suddenly the div did allow me to use a header tag, whereas before it failed to parse a new line. This caused the header tag within the div to sort of form a block, aligned to the left, and the other content of the div to be pushed to the right, in another block. This forced me to clumsily use a span tag above my div in order to hold a book's title.
Strangely enough, the p-tag continues to not work properly within my divs. It functions as if it is a <br />. Any idea as to why that is? Does it have to do with a div's display settings?
Kindly,
Snowfall