The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Problem in resizing the container with bootstrap
KograKiite
post Sep 25 2023, 06:35 AM
Post #1





Group: Members
Posts: 1
Joined: 25-September 23
Member No.: 29,059
sad.gif I'm having trouble resizing the container because the large image takes up most of the page. I've tried many ways but haven't been able to fix it.
You can see my work here: https://codepen.io/yxvmemxa-the-decoder/pen/yLGKgqJ
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Jason Knight
post Oct 11 2023, 12:25 PM
Post #2


Advanced Member
****

Group: Members
Posts: 103
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · General Web Design · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 01:21 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC