/wsr/ - Worksafe Requests » Thread #1478853

[9 / 2 / 1]

3MiB, 3344x622, Screenshot 2024-07-29 at 10.47.19 PM.png

Cascading StyleSheets

Anonymous Tue 30 Jul 2024 13:58:27 No.1478853 View View Reply Original Report

I'm trying to fix a bug on my website whereby these flex items are incorrectly centered
notice how 'beyond the western deep' juts up?
this happens with any item where the caption goes to 2 lines
I have no idea what's causing this

Anonymous

Anonymous Tue 30 Jul 2024 13:59:40 No.1478854 Report

Quoted By: >>1478969

here is the relevant code

.flex-gallery {
margin-left:auto;
margin-right:auto;
width:100%;
text-align:center;
}
.gallery {
display: inline-block;
border: 2px solid black;
border-radius: 15px;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 15px;
width: 180px;
max-height:241.6px;
margin: 5px;
background-color: linen;
background: rgba(250, 240, 230, 0.75);
}
.gallery:hover {
background-color: pink;
}
.gallery img {
width: 100%;
vertical-align:middle;
}
.galleryph {
display: inline-block;
border: 2px solid transparent;
border-radius: 15px;
padding-top: 15px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 15px;
width: 180px;
margin: 5px;
background-color:transparent;
}
.desc {
padding-top: 15px;
padding-bottom: 15px;
color:black;
font-family: "Verdana", sans-serif;
}
#descovf {
padding-top:5px;
padding-bottom:5px;
}
.imgcontainer img {
border: 3px solid black;
border-radius: 15px;
}
.imgcontainerph img {
border: 3px solid black;
border-radius: 15px;
visibility:hidden;
}
.container {
text-align: center;
border: 2px solid black;
border-radius: 15px;
margin-left:auto;
margin-right:auto;
margin-bottom: 20px;
margin-top: 20px;
background-color: linen;
padding: 10px;
width: 65%;
font-family: "Verdana", sans-serif;
}
@media only screen and (max-width: 768px) {
.imgcontainerph img {
display:none;
}
.galleryph {
display:none;
}
}

Anonymous

Anonymous Tue 30 Jul 2024 14:27:51 No.1478856 Report

Quoted By:

and on the HTML side

<div class="flex-gallery">
<a href="AngelsOrchard.html"><div class="gallery"><div class="imgcontainer"> <img src="/webcomic stuff/A/Angels Orchard crop.png"></div><div class="desc">Angel's Orchard</div></div></a>
<a href="Aquapunk.html"><div class="gallery"><div class="imgcontainer"> <img src="/webcomic stuff/A/Aquapunk image Cropped.png"></div><div class="desc">Aquapunk</div></div></a>
<a href="Back.html"><div class="gallery"><div class="imgcontainer"><img src="/webcomic stuff/B/back image cropped.png"></div><div class="desc">Back</div></div></a>
<a href="BadWitches.html"><div class="gallery"><div class="imgcontainer"><img src="/webcomic stuff/B/bad witches crop.png"></div><div class="desc">Bad Witches</div></div></a>
<a href="BetweentheBranches.html"><div class="gallery"><div class="imgcontainer"><img src="/webcomic stuff/B/between the branches crop.png"></div><div class="desc">Between the Branches</div></div></a>
<a href="BeyondtheWesternDeep.html"><div class="gallery"><div class="imgcontainer"><img src="/webcomic stuff/B/Beyond the Western Deep image cropped.png"></div><div class="desc" id="descovf">Beyond the Western Deep</div></div></a>
<a href="ConfettiCookies.html"><div class="gallery"><div class="imgcontainer"><img src="/webcomic stuff/C/Confetti Cookies crop.png"></div><div class="desc">Confetti Cookies</div></div></a>
<div class="galleryph"><div class="imgcontainerph"></div><div class="desc"></div></div>
<div class="galleryph"><div class="imgcontainerph"></div><div class="desc"></div></div>
<div class="galleryph"><div class="imgcontainerph"></div><div class="desc"></div></div>
<div class="galleryph"><div class="imgcontainerph"></div><div class="desc"></div></div>
<div class="galleryph"><div class="imgcontainerph"></div><div class="desc"></div></div>
<div class="galleryph"><div class="imgcontainerph"></div><div class="desc"></div></div>
</div>

Anonymous

Anonymous Tue 30 Jul 2024 16:57:55 No.1478888 Report

Quoted By: >>1478910

>>1478853
post the website nig

the fix is to remove padding from the descriptions and instead have an element there inside of which you will center text properly both vertically and horiz

Anonymous

Anonymous Tue 30 Jul 2024 18:46:42 No.1478910 Report

Quoted By:

>>1478888
https://idelides.xyz/webcomicslistfantasy.html
'vertical-align:center;' doesn't do anything though

Anonymous

Anonymous Tue 30 Jul 2024 23:05:10 No.1478969 Report

Quoted By: >>1478986

>>1478854
>.flex-gallery {
doesn't use display: flex
ofc, using css grid would be even better, but this mid 00's styling is just masochism

Anonymous

Anonymous Wed 31 Jul 2024 00:36:13 No.1478986 Report

Quoted By:

>>1478969
I'm not very experienced with coding, all my knowledge of css comes from a handful of W3Schools articles and examination of the sourcecode of a few neocities sites

css grid looks excellent and I've never heard of it before, I'll test this out once I feel better (I came down with some kind of bug not long after I posted the OP so I've been sick in bed all day today)

Anonymous

Anonymous Wed 31 Jul 2024 18:43:32 No.1479131 Report

Quoted By: >>1479148

.flex-gallery {
display: flex;
flex-wrap: wrap;
margin-left:auto;
margin-right:auto;
width:100%;
text-align:center;
justify-content: center;
}

I believe you can remove:
margin-left:auto;
margin-right:auto;
width:100%;

Also, adding align-items: center; shows it's still not quite there by a pixel or so. I'll leave that one up to you. I hope this helped a bit.

Anonymous

View Same Google ImgOps iqdb SauceNAO Screenshot 2024-07-31 at 4.32.19 (...).png, 5MiB, 3302x1136

Anonymous Wed 31 Jul 2024 20:33:12 No.1479148 Report

Quoted By:

>>1479131
that did it! Thank you!

Capcode	All Only User Posts Only Verified Posts Only Moderator Posts Only Manager Posts Only Admin Posts Only Developer Posts Only Founder Posts
Show Posts	All Only With Images Only Without Images Only Spoiler Images Only Non-Spoiler Images
Deleted Posts	All Only Deleted Posts Only Non-Deleted Posts
Ghost Posts	All Only Ghost Posts Only Non-Ghost Posts
Post Type	All Only Sticky Threads Only Opening Posts Only Reply Posts
Results	All Grouped By Threads
Order	Latest Posts First Oldest Posts First

On these archives

Your latest searches

Cascading StyleSheets