Q: Image overlap with text and Textarea autofill

1

Help!

2 questions:

  1. How do i make sure that my image doesnt overlap with my text?
    image

div class=“row”>
div id=“nav” class=“col-sm-8”
/div
div id=“nav” class=“col-sm-4” //--------------my picture with border
/div
/div
div class=“row”
div id=“nav” class=“col-sm-12” //-------------Portfolio
/div
/div
They are in different row and column.

  1. I cant get my text area to automatically takes the remaining column and row space.
    image

I use flexbox for the textbox field and it works great, but i cant get flexbox to work with textarea. Instead i use resize function for my textarea but thats not what i want to achieve.

//TEXTBOX ---------------------------------------------------------
/flexbox/
/* Reset */

  • { box-sizing: border-box; margin: 0; padding: 0; }
    body { margin: 1rem; }
    h2 { margin: 2rem 0 0; }

/* Flexbox Example */
.flexbox { display: flex; }
.flexbox .stretch1 { flex: 1; }
.flexbox .stretch3 { flex: 3; }
.flexbox .normal { flex: 0; margin: 0 0 0 1rem; }
.flexbox div input { padding: .5em 1em; width: 100%; }
.flexbox div button { padding: .5em 1em; white-space: nowrap; }

//TEXTAREA---------------------------------------------------
textarea.vertical {
resize: vertical;
max-height: 300px;
min-height: 200px;
}
textarea {
resize: horizontal;
max-width: 300px;
min-width: 200px;
}

My source code:

2

Hey.

  1. You gave a fixed height to the div wrapping your image; that is stopping the #portfolio-page-title div to wrap on a new line.
  2. You set a width of 100% for your inputs ( .flexbox div input { padding: .5em 1em; width: 100%; } ) but not for your textarea (which also has two declaration blocks).

The solution for your first issue is to just remove the .frame div and, if you don’t want the image to resize too much, just give a min-width to the image itself:

img {
  min-width:150px;
  /* Other stuff */
}

As for your textarea, you can remove both your declaration blocks and use only one like so:

textarea { 
  resize: vertical;
  min-height:38px; // Same height of the other inputs
  max-height:200px;
  width:100%;
  min-width: 200px;
}

You can also remove the .text-box declaration block, which doesn’t seem to be doing anything (since you want the inputs to take 100% of the horizontal space).

3

Thank you!!! :slight_smile: