Portfolio- Users with larger screens

Portfolio- Users with larger screens
0

#1

https://codepen.io/agpaoak/full/dROzvB/

So far on my portfolio page I have bare information. I will go back and redo backgrounds and colors through CSS. However I ran into one problem. While checking if things aligned correctly when I shrink my window (which seems ok so far), it occurred to me that users with larger screens may have difficult reading it. For example, they have to look far left to far right in order to read the information . Is there a way to solve this problem? I don’t think this topic was covered in assignments.


#2

bs grid is the way, just make div with those lines smth like .col-lg-8, check docs for more info,
u use 2 bs version (3 and 4) you might want to choose one , their classes are slightly different


#3

So would that mean for every class where I would want to have a column, would I want to add class=“col-xs-4 col-sm-4 col-md-4 col-lg-8”? And by having that, I would be accounting for all devices ( smartphones, tablets, and desktops with different monitor sizes)?


#4

https://getbootstrap.com/css/#grid check out the list in grid system there are basic rules of applying bs grid .

in short: in a .container/.container-fluid you place .row(s),
inside row(s) you place columns and describe for each col sizes for different viewports col-xs-,col -sm-,col-md-, col-lg- where * is a number of cols out of 12 for each viewport, those will be ur sizes for different devices( screen sizes) see table https://getbootstrap.com/css/#grid-options
try this

<div class="container-fluid">
  <div class="row green">
    <div class="col-md-3 col-md-offset-2 col-sm-6 col-xs-1 red">Aloha</div>
  </div>
  <div class="row ">
    <div class="col-xs-3 blue">it's  blue</div>
    <div class="col-xs-3 red">red here</div>
  </div>
</div>

.red{  background-color:red; }
.green{ background-color:green; }
.blue{ background-color:blue; }

i didnt describe -lg- in the so it will take -md- settings with offset in the 1st row , and -xs- for the 2nd

*was not sure what you meant by ‘every class’ ))