I need help again :(

I need help again :(
0

#1

hello! I’m trying to size and place a

element with bootstrap and it doesn’t seem to work. I want to make it screen size responsive so that the picture I’ve placed in the background could be visible. can someone tell me what I’m doing wrong, or should I maybe put that picture in the same div as a separate element and place it with bootstrap as well?


#2

#3

i think you’re missing the bootstrap.css https://getbootstrap.com/docs/4.0/getting-started/introduction/

.text1{
  width: 800px; //adjust
}

#4

thank you so much! could you please tell me how to implement that url in my code?


#5

just paste the boostrap.min.css before your style.css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">

#6

I thought that codepen does that automatically… in any case hanks for your help! could you just explain that remark you had about my .text1 css element? i didn’t quite understand what should I do with that…


#7

I thought that codepen does that automatically

oh no, it’s done manually by including it.
from codepen.io you have to go to – settings / css / then paste your external css file

could you just explain that remark you had about my .text1 css element? i didn’t quite understand what should I do with that…

the 800px was breaking your layout and giving your page a horizontal scrollbar,
we usually just want to scroll vertically when in mobile.
avoid using fixed values if you want them to adapt to other screen resolution
(unless you’re gonna adjust the value via media query), use % or something…


#8

oh no, I never do that, it’s just that I got way too frustrated, because I couldn’t get bootstrap to work and I lost way too much time on that, so I just typed that so I could work on the rest of the page until I got some advice. I appreciate this very much!


#9

just one more thing, if I’m not bothering you too much… when I incorporate that link in my code, bootstrap works just fine, but my css gets a little messed up (some colors change) did I do something wrong or…?


#10

how do i explain this…
bootstrap represents a red door and you want it painted black.
but since you never had the red door in the first place,
you now realize that you never really have painted the whole area black.
so now you need to brush those spots you just missed.
kapeesh? (:


#11

I’ll get to brushing then :slight_smile: I’ll just make new css classes and assign them to those elements again. thank you for all your help!