FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

RKZoltan

@RKZoltan

now words come up but the picture is just a small box like a link

Rex Smith Jr.

@rsmith731

can someone help me with these images? They are horizontal, but when the browser is resized they stack on top of each other but too close to the edge of the browser

vínαч puppαl

@vinaypuppal

@RKZoltan are you using code pen ?? CSS should be CSS panel of codepen and
If your new to codepen read this article https://medium.freecodecamp.com/codepen-tips-and-best-practice-cf926ebd0b11

RKZoltan

@RKZoltan

thank you @vinaypuppal it worked with a different image

CamperBot

@camperbot

rkzoltan sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:

:cookie: 583 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal

vínαч puppαl

@vinaypuppal

@rsmith731 add padding to container which holds those images so images wont be close to edge of browser

Rex Smith Jr.

@rsmith731

@vinaypuppal ok thanks

CamperBot

@camperbot

rsmith731 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:

:cookie: 584 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal

bkd705

@bkd705

yoo who wants help

RKZoltan

@RKZoltan

<h1 class="text-primary ">Bill Gates</h1>
<img class="thick-red-border" src="http://blogs-images.forbes.com/mfonobongnsehe/files/2014/09/bill-gates.jpg" alt="BillGates">

Rex Smith Jr.

@rsmith731

@vinaypuppal is there a way to center it, because when i add padding it doesn’t look right when resized

RKZoltan

@RKZoltan

this is my code but my picture doesnt have a red border

vínαч puppαl

@vinaypuppal

@rsmith731 oh okay try
remove padding and
on container add width: 95% or90% and margin: 0 auto

RKZoltan

@RKZoltan

Why doesnt my picture have a red border?
BTW
Repent for the kingdom of heaven is at hand. Believe the gospel of Jesus Christ.

nevermind it worked just had to click run

RKZoltan

@RKZoltan

.thick-blue-border {
border-color: blue;
border-width: 15px;
border-style: solid;
border-radius: 40%;
}
.black-text {
color: black;
font-size: 15p;
}
</style>

<h1 class="blue-text">Bill Gates
</h1>

<h2 class= "red-text">The Founder of Microsoft</h2>
<img class="thick-blue-border" src="http://blogs-images.forbes.com/mfonobongnsehe/files/2014/09/bill-gates.jpg" alt="BillGates">

<h3 class="black-text">Heres A Time Line of Bill Gates's Life</h3>

<h4>1955: William Henry Gates III is born to attorney William Henry Gates II and Mary Gates, a schoolteacher, University of Washington regent and chairwoman of United Way International. He is raised in Seattle.

1967: Gates is enrolled in the Lakeside School, an exclusive private school in Seattle, where he befriends Paul Allen. The two students share an interest in computers and programming. The school notices his knack for technology and asks him to create a computerized schedule of classes.Gates’ 2005 keynote speech at Lakeside School.

MY PROBLEM IS THAT THE PARAGRAPHS ARE SHOWN TOGETHER AND NOT SEPARATED AS PARAGRAPHS. How do I fix this?

vínαч puppαl

@vinaypuppal

@RKZoltan wrap paragraphs in <p>Your Paragraph</p> tag
Reference http://www.w3schools.com/html/html_paragraphs.asp

BehindTheMath

@BehindTheMath

Can someone help me with a CSS / Bootstrap issue?

How come over here it's covered up: http://behindthemath.ga/broken.html

But here it's working: http://behindthemath.ga/working.html?

alessiochiffi

@alessiochiffi

@alessiochiffi
hi everyone! Two days ago I received a call for a job interview..junior web designer position. They asked me if I can do a brief converting a PSD file in html and css and making a new dashboard
I did everything but I have a doubt
How I will send the files to them?
A zip file with all the folders and files(img, css, js, file.html) should be enough?

vínαч puppαl

@vinaypuppal

@BehindTheMath This is only difference between both if you add below css to broken.html it will look same as working.html

body {
    padding-top: 50px;
}

oh took this much long time to debug :smile:

d wilder

@alhazen1

This message was deleted

RKZoltan

@RKZoltan

@vinaypuppal thank you

CamperBot

@camperbot

rkzoltan sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:

:warning: rkzoltan already gave vinaypuppal points

RKZoltan

@RKZoltan

@alhazen1 I could also use <li> to make a list right?

vínαч puppαl

@vinaypuppal

yes http://www.w3schools.com/html/html_lists.asp

@RKZoltan

RKZoltan

@RKZoltan

@vinaypuppal thank you

CamperBot

@camperbot

rkzoltan sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:

:warning: rkzoltan already gave vinaypuppal points

d wilder

@alhazen1

@RKZoltan Yes IF you wanted this displayed as a list.

RKZoltan

@RKZoltan

got it

d wilder

@alhazen1

@RKZoltan Generally use p tags for paragraphs, h tags for heading and li for lists. There are reasons for this beyond just how it looks on the page which you will soon discover.

BehindTheMath

@BehindTheMath

@vinaypuppal I know, but what's causing the discrepency?

vínαч puppαl

@vinaypuppal

@BehindTheMath the nav bar isposition: fixed so it is taken out of document flow so .container-fluid div will not think it has navbar above it so it starts at top and since bootstarp gave high z-index for navbar so its over your div

@BehindTheMath so you need to add some padding to avoid that issue and if you can see in dev tools bootstrap has done same for .sidebar you added it gave top:51px so sidebar is not behind navbar

BehindTheMath

@BehindTheMath

The other page does not have position:fixed?

Where is that set?

I don't see it

Ah, found it

vínαч puppαl

@vinaypuppal

@BehindTheMath position:fixed added by bootstrap as u used .navbar-fixed-top class

BehindTheMath

@BehindTheMath

But the other page has the same thing

vínαч puppαl

@vinaypuppal

yes but this is the only difference as i said before @BehindTheMath

@BehindTheMath

BehindTheMath

@BehindTheMath

@vinaypuppal I understand your solution, but I don't understand why it's different without that. They both have the same claases.

Where communities thrive

People

Repo info

Activity