HTML & CSS any tips to display better on phones

[holaur]

Hi Ive got a bunch of edits to upload but was wondering if anyone had any tips for this to display better on phones, i don't want the box to be fixed when the screen width is smaller than the box with text. Ive since moved to sans-serif which is much better

Auroch - NFT8

Automating small business, free humanity

auroch.io

kind regards, james

 

[Krygore]

If you are familiar with Bootstrap, you could try putting everything into a container and applying column spacing for each breakpoint. Like this:

<div class="container">
    <div class="item, col-lg-12, col-md-6, col-sm-2">
    </div>
</div>

These links will help you better understand how that all works lol

Bootstrap Containers: https://getbootstrap.com/docs/5.1/layout/containers/
Bootstrap Grid: https://getbootstrap.com/docs/5.1/layout/grid/
Bootstrap Columns: https://getbootstrap.com/docs/5.1/layout/columns/

You may as well familiarise yourself with the site while your there, very useful and quick way to add CSS features without cluttering your code 🙂

 

[holaur]

thank you, looks like a great resource, still trying to get my head around it, i think its interfering with my existing css, i get it all bunched up on the side

<div class="center2" style="width:500px">
  <div class="container">
    <div class="item, col-lg-12, col-md-6, col-sm-2">
      <h2 style="text-align:center; font-family:  sans-serif ; width: 1; color: #39FF14; background-color: #000;"><input type="image" src="https://auroch.mypinata.cloud/ipfs/QmZjt8Cz787BAtWZZyxXJSFMvt5PmaKKMFUQVDhj1YYz9o/9.png"
        style=" transform: scaleX(-1);" width="34" height="36" alt="8"/> &nbsp;  ROOSTER LORE &nbsp;   <input type="image" src="https://auroch.mypinata.cloud/ipfs/QmZjt8Cz787BAtWZZyxXJSFMvt5PmaKKMFUQVDhj1YYz9o/9.png"  width="34" height="36" alt="9"/></h2>
      <p style="text-align:center;">Established 09/02/6000BC<br>Chapter 1</p>
      <p>Welcome to Pluto, The Plutonian headquarters of the Rooster Clan, the center for the Auroch Alliance's interests on Pluto. Nestled amongst the Kuiper Belt, Pluto has the best view of the Ort Cloud.</p>
      
      <p>0.00000003m down to 3 × 10 -10 m wavelength
 
        <br><br>
      the diameter of a gold atom is 1.44 × 10 -10 m which is smaller than this wave band
      <br><br>
      The smallest possible size for anything in the universe is the Planck Length, which is 1.6 x10-35 m across but we will come back to this another time
    
    </p>
    </div>
  </div>
</div>

<style>
 
    a-scene {
      height: 560px;   
        width: 100%;
    }
    
    body {
      border: 0px;
      background-color: rgb(20, 13, 39);
    }
    div#links {
      position:absolute;

  z-index:3;
  margin: auto;
 
    
    }
    .center {
  margin: auto;
  width: 100%;

  padding: 0px;
}
.center2 {
 
margin: auto;
width: 530px;
border: 5px solid #FFFF00;
padding: 10px;
background-color: lightblue;
}
h1.center2 {
  color: white;
  text-align: center;
  font-family: sans-serif ;
}
p { font-family: sans-serif ; }

.a-enter-vr-button
{ bottom: auto !important; top: -500px; }
  </style>

 

[OldMan]

Program for the phone first. Use a width of 360px and the length of 700px. Do your corrections as you increase its size. This makes life a lot easier.

 

[BGB]

How you are declaring your breakpoints for phone?