Working on my Wiki Viewer

#1

Hey guys!

I am working on building the “Wikipedia Viewer” and I am having some trouble with the layout. Admittedly I have issues with CSS layout on many projects, and usually need to get help from an experience Developer friend of mine, I thought I’d try reaching out on the forum.

As I can only place one image, here is what you can see happening when I make the browser smaller

However here you can see that my text seems to move when I make the page smaller

Screen Shot 2017-05-17 at 3.49.03 pm.png778×1154 114 KB

I’ve played around with a couple of different options, but here is the current code I have on the H1 now (which has a background colour)

h1 {
font-family: ‘Cinzel’, serif;
background-color: #076d8a;
font-weight: 400;
color: white;
font-size: 50px;
text-align: center;

height: 225px;
width: 100%;
margin-top: 340px;

padding-top: 75px;
position: fixed;

display: block;
}

I’m not sure if this is the best way, I tried wrapping a span around the text in H1 to see if I could access and somehow fix the text directly, however I have had issues with everything I have tried.

I hope with numerous attempts at playing with css layout it will start to make more sense to me.

Thanks for your help in advance :slight_smile:

Francesca x

#2

Your h1 looks okay to me… it seems that your input box is in an unusual place. I’m not familiar with this project yet… what are you hoping it’ll look like?

#3

I guess it would be best for everything to adapt to the sizing of the browser?

Here is the code for the input, when I remove the position fixed, it doesn’t show in front of the header. I think because it is fixed too.

.searchForm-inputContainer {
padding: 0 10px;
margin-top: 500px;
position: fixed;
border-radius: 25px;
margin-left: 500px;
font-family: ‘Raleway’, sans-serif;
}

However if I remove “fixed” from the header this happens

Screen Shot 2017-05-17 at 7.12.25 pm.png968×978 62.6 KB

Thanks for taking a look :slight_smile:

#4

Personally, I would nest the h1 and the input inside a div, and then apply the styling to the IDs.

This gives a container (div) that can have the colored background, and elements that can use padding, margins and justification (left, right, center) to flow the way you want them to.

[code]
#divHeader {…}
#header1 {…}
#input1 {…}

[/code]
#5