0

I am a new user of html, and I am currently trying to figure out how to make all my contents shrink but also not be messed up when I zoom in. The context is that I am working on a 27 inch display and everything appears to be in perfect size and proportion, however I will be handing this assignment in to a teacher who has a smaller screen, a laptop screen. This means that by default my website for him will be zoomed in (three scrolls up) and my images get cut off the edge. The point of the website isn't to also make it look good on phone or anything, I just need it to be presented nicely on computer screens.

This is what they look like unzoomed: enter image description here

What I want: For it to all shrink toward the CENTER to fit a smaller screen.

When I zoom in WITH bootstrap: enter image description here

When I zoom in WITHOUT bootstrap: enter image description here

Code with bootstrap: HTML:

<div class="pie">

              <div class="text2">
                <h1>HOT BUILDS</h1>
                <p>Recommended builds with hot prices from our <a href="#music.html" class="website" target="_blank"><b>gaming builds.</b></a></p>
              </div>

            <section id="tickets">
              <div id="tickets container">

                <div class="ticketsbottom">
                  <div class="row">

                          <div class="ticketsitem col-sm-12 col-md-4" style="background-image: url(./assets/background/helios2.jpg)">
                            <div class="icon">
                              <img src="./assets/icons/bhov/helios.png"/>
                              <div class="iconinside">
                                <img src="./assets/icons/ahov/insidehelios.png"/>
                              </div>
                            </div>
                            <h2>HELIOS</h2>
                            <p><b style="font-size: 1.8rem">$3355</b><br>- Intel Core i7 10700K 3.8GHz<br>- 16GB Gigabyte Memory<br>- Gigabyte Z490 Motherboard<br>- WD 500GB SSD OS Drive<br>- ASUS RTX 3070 8GB Graphics<br>- eVGA 750W Power Supply</p>
                            <a href="#music" type="button" class="superbutton" >Add to cart</a>
                          </div>


                          <div class="ticketsitem col-sm-12 col-md-4" style="background-image: url(./assets/background/coal2.png)">
                            <div class="icon">
                              <img src="./assets/icons/bhov/hot1.png"/>
                              <div class="iconinside">
                                <img src="./assets/icons/ahov/insidecoal.png"/>
                              </div>
                            </div>
                            <h2>COAL</h2>
                            <p><b style="font-size: 1.8rem">$3360</b><br>- Intel Core i7 10700KF 3.8Ghz<br>- 16GB Gigabyte Memory<br>- Gigabyte Z490 Motherboard<br>- Samsung 500GB SSD OS Drive<br>- Gigabyte RTX 3070 8GB Graphics<br>- Gigabyte 750W Power Supply</p>
                            <a href="#music" type="button" class="superbutton" >Add to cart</a>
                          </div>


                          <div class="ticketsitem col-sm-12 col-md-4" style="background-image: url(./assets/background/remix2.png">
                            <div class="icon">
                              <img src="./assets/icons/bhov/remix.png"/>
                              <div class="iconinside">
                                <img src="./assets/icons/ahov/insideremix.png"/>
                              </div>
                            </div>

                            <h2>REMIX</h2>
                            <p><b style="font-size: 1.8rem">$6270</b><br>- Intel Core i9 10850K 3.6Ghz<br>- 32GB Corsair Memory<br>- Gigabyte Z490 Motherboard<br>- Samsung 2TB SSD OS Drive<br>- Gigabyte RTX 3090 24GB Graphics<br>- eVGA 1000W Power Supply</p>
                            <a href="#music" type="button" class="superbutton" >Add to cart</a>
                          </div>

                  </div>
                </div>
              </div>
            </section>
</div>

CSS:

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;
}

.col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}
/*Tickets Section*/

.pie {
  background-color: #0d0d0d;
}


#tickets {

  text-align: center;

  margin: 0 auto;
  padding: 20px 0;
}

#ticketstop .sectiontitle h1{
  font-size: 2rem;
  font-weight: 300;
  color: black;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .2rem;
  text-align: center;
  opacity: 100;

}
.sectiontitle span{
  color: #347f7d;
}

#tickets .sectiontitle{
  font-size: 2rem;
  font-weight: 300;
  color: white;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .2rem;
  text-align: center;
  opacity: 100;

}

#tickets .sectiontitle span{
  color: #347f7d;
}

#tickets p {
  text-align: justify;
}

#tickets .ticketsbottom{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  transform: translate(0,-30%);
}

#tickets .ticketsitem {

  flex-basis: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0px;
  border-radius: 10px;

  background-size: cover;
  margin: 10px 6px;
  position: relative;
  z-index: +1;
  transition: .2s;
  box-sizing: border-box;


}

#tickets .ticketsitem::after{
  content: '';
  position: absolute;
  left:0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(60deg, #26323c 0%, #485563 100%);
  opacity: .8;
  z-index: -1;
  border-radius: 10px;
}

#tickets .ticketsbottom .icon{
  height: 80px;
  width: 20px;
  margin-bottom: 25px;
}



#tickets .ticketsbottom .icon img{
  margin-left: auto;
  margin-right: auto;
  transform: translate(-50%,-70%);
  width: 350px;
  position: absolute;
  opacity: 100;
}

#tickets .ticketsbottom .icon:hover img{
  opacity: 0
}


#tickets .ticketsbottom .icon .iconinside img{
  margin-left: auto;
  margin-right: auto;
  transform: translate(-50%,-70%);
  width: 350px;
  position: absolute;
  opacity: 0;
}

#tickets .ticketsbottom .icon .iconinside img:hover{

  opacity: 100;


}


#tickets .ticketsitem h2{
  font-size: 3rem;
  color: white;
  margin-bottom: 10px;
  text-transform: uppercase;
}

#tickets .ticketsitem p{
  color: white;
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.9rem;
  white-space: nowrap;
}



#tickets .ticketsitem:hover{
  position: relative;

  transition: 0.1s;
}

HTML WITHOUT BOOTSTRAP:

              <div class="text2">
                <h1>HOT BUILDS</h1>
                <p>Recommended builds with hot prices from our <a href="#music.html" class="website" target="_blank"><b>gaming builds.</b></a></p>
              </div>

            <section id="tickets">
              <div id="tickets container">

                <div class="ticketsbottom">
                  <div class="ticketsitem" style="background-image: url(./assets/background/helios2.jpg)">
                    <div class="icon">
                      <img src="./assets/icons/bhov/helios.png"/>
                      <div class="iconinside">
                        <img src="./assets/icons/ahov/insidehelios.png"/>
                      </div>
                    </div>
                    <h2>HELIOS</h2>
                    <p><b style="font-size: 1.8rem">$3355</b><br>- Intel Core i7 10700K 3.8GHz<br>- 16GB Gigabyte Memory<br>- Gigabyte Z490 Motherboard<br>- WD 500GB SSD OS Drive<br>- ASUS RTX 3070 8GB Graphics<br>- eVGA 750W Power Supply</p>
                    <a href="#music" type="button" class="superbutton" >Add to cart</a>
                  </div>
                  <div class="ticketsitem" style="background-image: url(./assets/background/coal2.png)">
                    <div class="icon">
                      <img src="./assets/icons/bhov/hot1.png"/>
                      <div class="iconinside">
                        <img src="./assets/icons/ahov/insidecoal.png"/>
                      </div>
                    </div>
                    <h2>COAL</h2>
                    <p><b style="font-size: 1.8rem">$3360</b><br>- Intel Core i7 10700KF 3.8Ghz<br>- 16GB Gigabyte Memory<br>- Gigabyte Z490 Motherboard<br>- Samsung 500GB SSD OS Drive<br>- Gigabyte RTX 3070 8GB Graphics<br>- Gigabyte 750W Power Supply</p>
                    <a href="#music" type="button" class="superbutton" >Add to cart</a>
                  </div>
                  <div class="ticketsitem" style="background-image: url(./assets/background/remix2.png">
                    <div class="icon">
                      <img src="./assets/icons/bhov/remix.png"/>
                      <div class="iconinside">
                        <img src="./assets/icons/ahov/insideremix.png"/>
                      </div>
                    </div>
Toknn
  • 75
  • 1
  • 8
  • Get rid of `flex-wrap: wrap;` from `.row`? – Hao Wu Apr 09 '21 at 02:32
  • Didn't seem to fix my issue here. I want the boxes to automatically shrink when the user zooms in – Toknn Apr 09 '21 at 02:40
  • Do you mean zoom or do you mean smaller viewport? – A Haworth Apr 09 '21 at 04:37
  • Yes, a smaller viewport, but its the same thing, the smaller viewport just zooms it in automatically – Toknn Apr 09 '21 at 05:07
  • Ah, there's something I'm not understanding. If the user zooms in they see less of the page, but bigger. If the viewport is smaller then (on a responsive site) everything is still seen only smaller. Which is required? – A Haworth Apr 09 '21 at 11:45

0 Answers0