![]() |
![]() ![]() |
![]() |
KograKiite |
![]() ![]()
Post
#1
|
Group: Members Posts: 1 Joined: 25-September 23 Member No.: 29,059 ![]() |
![]() You can see my work here: https://codepen.io/yxvmemxa-the-decoder/pen/yLGKgqJ |
Jason Knight |
![]()
Post
#2
|
Advanced Member ![]() ![]() ![]() ![]() Group: Members Posts: 109 Joined: 25-December 22 Member No.: 28,719 ![]() |
I'd say a lot of your problem is the trash that is bootcrap. A predatory scam taking advantage of beginners by making you THINK it's doing you a favor. It isn't.
As evidenced by you having DIV soup, non-semantic gibberish HTML, outdated and outmoded practices, and more code inside <body> than you should have for both body AND the stylesheet at this stage. Don't get me started about the presentational use of classes taking a dump on HTTP parallelism and caching models, mindlessly repeating yourself. That's not on you, that's on the sleazy dirtbag predators and fools who CREATED bootstrap who are unqualified to write a single blasted line of HTML or CSS! First let's fix your markup.Inside <body> all you should really have is: CODE <h1>Welcome Master</h1> <main> <section class="figureCards"> <figure> <img src="https://i.pinimg.com/564x/c0/3d/dd/c03dddbb63db632757390c8a1a697907.jpg" alt="Saber" > <figcaption>Saber</figcaption> </figure> <figure> <img src="https://i.pinimg.com/564x/31/48/7e/31487e3278907721c100ca130d921f95.jpg" alt="Archer" > <figcaption>Archer</figcaption> </figure> <figure> <img src="https://i.pinimg.com/564x/26/bd/62/26bd6234b69356ba390e0ca4a9bfb1c1.jpg" alt="Lancer" > <figcaption>Lancer</figcaption> </figure> <figure> <img src="https://i.pinimg.com/564x/d8/a2/7c/d8a27c4aed4d3855b864a6fac8de6804.jpg" alt="Assassin" > <figcaption>Assassin</figcaption> </figure> <figure> <img src="https://static.wikia.nocookie.net/typemoon/images/7/73/CasterCardGold.png/revision/latest?cb=20230627070536" alt="Caster" > <figcaption>Caster</figcaption> </figure> <figure> <img src="https://static.wikia.nocookie.net/typemoon/images/8/8c/RiderCardGold.png/revision/latest?cb=20230627065727" alt="Rider" > <figcaption>Rider</figcaption> </figure> <figure> <img src="https://static.wikia.nocookie.net/typemoon/images/5/59/BerserkerCardGold.png/revision/latest?cb=20230627063722" alt="Berserker" > <figcaption>Berserker</figcaption> </figure> <figure> <img src="https://static.wikia.nocookie.net/typemoon/images/8/85/RulerCardGold.png/revision/latest?cb=20230627061808" alt="Ruler" > <figcaption>Ruler</figcaption> </figure> <figure> <img src="https://static.wikia.nocookie.net/typemoon/images/b/bd/AvengerBackGold.png/revision/latest?cb=20230627061227" alt="Avenger" > <figcaption>Avenger</figcaption> </figure> <figure> <img src="https://static.wikia.nocookie.net/typemoon/images/8/8b/ForeignerClassCard.jpg/revision/latest/scale-to-width/360?cb=20180113132740" alt="Foreigner" > <figcaption>Foreigner</figcaption> </figure> <figure> <img src="https://static.wikia.nocookie.net/typemoon/images/5/52/MoonCancerCardGold.png/revision/latest?cb=20230627062405" alt="MoonCancer" > <figcaption>Moon Cancer</figcaption> </figure> <figure> <img src="https://static.wikia.nocookie.net/typemoon/images/1/15/AlterEgoCardGold.png/revision/latest?cb=20230627060545" alt="AlterEgo" > <figcaption>Alter Ego</figcaption> </figure> <!-- .figureCards --></section> </main> No need (yet) for that extra "container" nonsense, MAIN marking the main content of the page, a section inside that (assuming you'd have multiple sections) containing figures. Aka a media element with its caption. Figurecaption replacing the abuse of <p> you had going there... (what makes one word a grammatical paragraph?!?) Flex is your friend. Flex-wrap is an even bigger friend... meaning for CSS we can just: CODE body { max-width:70rem; margin:0 auto; background:beige; --clampPad:clamp(0.5rem, 2vw, 1.5rem); } h1 { padding:var(--clampPad); margin:var(--clampPad); text-align:center; font:bold 3rem/1.2 "Courier New',Courier,monospace; background:#EEE; border:0.125rem solid #999; } .figureCards { display:flex; flex-wrap:wrap; justify-content:center; align-items:start; gap:var(--clampPad); padding:var(--clampPad); box-sizing:border-box; width:100%; } .figureCards figure { width:100%; max-width:15rem; text-align:center; } .figureCards img { display:block; max-width:100%; } .figureCards figcaption { font-size:clamp(1.25rem, 6vw, 2rem) } Problem solved. No bootcrap, JavaScript, or any of the other junk you had in there needed. 2/3rds or less the code, simpler and easier to manage, without throwing HTTP parallelism, media targets, and caching models out the window. Again, I don't blame you for that bad code, I blame the con men and bunko peddling scumbags you were learning from. Here's a fork of your pen showing it in action. https://codepen.io/jason-knight/pen/eYbXGQO |
![]() ![]() |
![]() |
Lo-Fi Version | Time is now: 24th June 2024 - 11:52 PM |