I really need help with DIV's

HTML-CSS
1

Currently I’m trying to make the second challenge, the Portfolio one (https://codepen.io/JAEN_C/full/jzqgRP/), the thing is, I really have a difficult with DIV’s in general. I can’t seem to understand how they work. In college the main Focus is Desktop/Android aplications, so I’m kind a newbie with HTML/CSS. I made a new Pen, only so I could mess around with the code without ruining the Portfolio one, here
->> https://codepen.io/JAEN_C/full/aYmNdw/ <<-,
even so, I’m still lost. I already tried checking the documentation, and both the W3 and Bootstrap websites. I would really like to have some help with it, I already fixed and learned a lot of things but right now I’m stuck and would like to know:

  • How do I do so when I change the screen size, by decreasing the screen in the browser for example, the DIV header (yellow) becomes smaller, responsive to screen size, right now it stays big;
  • I also made other 4 DIV’s (the Pink one, the Purple one, one with a form and one with text only), how do I do so when I resize the screen, they stay where they are when they’re at full screen, and only becomes smaller. Right now when the screen size become smaller, they position one above the other;
  • How do I increase the text-area in the message box in the form;
3

I probably explained wrong, I’m not fluent in english. I’m trying to make it so the multiple DIV’s inside the main DIV, becomes smaller when the screen changes size, not just goes under the other divs, that’s why the background DIV (#fundo), has a fixed width and height. I changed the fixed values to both to 100%, when I make the screen smaller now only the yellow div becomes smaller. In the end I did all this thing so it looks like the “Contact Me” session in the example of the second Challenge.

4

Change

<div id="fundo" class="container-fluid">

to

<div id="fundo" class="container">

Is that what you wanted for your yellow bar?

5

Didn’t worked for me, I want so all the divs becomes smaller when the screen becomes smaller too. Right now when I resize the screen the divs jumps one above the other.
NORMAL.

one
one1366×768 73.7 KB
.
RESIZE.
two
two1366×768 173 KB

6

Update these:

<div id="left" class="col-lg-5 col-md-5 col-sm-5 ml-4 mr-4">

<div id="right" class="col-lg-5 col-md-5 col-sm-5 mr-4 well">

With this code your columns will stay side by side until your screen reaches the xs breakpoint. If you want them to remain side by side even on very small screens add col-xs-5 to each of them.

Note that in Bootstrap, all columns within a row should add up to 12; you only have 10 there.

7

I tried using col-xs-6 to both left and right div, it just made the divs smaller at full screen, I wanted to do so when the screen is little it stays the divs side by side and it only becomes smaller, but still side by side. It still didn’t worked. I really don’t know what should I do. Still, thanks for trying to help me! My idea is to implement it on the portfolio page in the end, I guess I will try to use other things that fits better in the screen.

8

Did you copy/paste the code I gave you above?

10

The suggestions I am making below apply just to the pink and purple boxes.

First, try changing #left to .pink and #right to .purple (as seen below).

.pink{ 
  background-color: pink;
}
.purple{
  background-color: purple;
}

Then you could use the following html:

  <div class="row">
    <div class="col-6">
      <div class="col-sm-12 pink">
      <p>DIVs LI 1-3:</p>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      </div>
    </div>
    <div class="col-6">
      <div class="col-12 purple">
        <p>DIVs LI 4-6:</p>
        <ul>
          <li>4</li>
          <li>5</li>
          <li>6</li>
        </ul>
      </div>
    </div>
  </div>

Using code above on wider screen

image
image1691×650 17 KB

Using code above on narrow screen

image
image398×824 13.3 KB

1 Like
11

Thanks man, you actually helped me with another problem I had haha I wanted the 2nd and 3rd DIV’s to stay side-by-side and the 4th and 5th to stay one above the other when the screen changes size, you helped with this one. Thanks again!

12

FANTASTIC! Exactly what I was trying to do, thanks man (or sir? I’m not sure wich one I should use), here’s how it is right now (https://codepen.io/JAEN_C/full/aYmNdw/), if I may, can you help me with just one more thing? I want to make a space between the form and the “ground”, I tried with margin but it didn’t change anything. Anyway thanks for what you already helped me with!