Need help with displaying divs side by side

1

Hi,

I need urgent help for a donation page i’m working on for a client.
I want to put the two class labeled:
(donate-description) and (donate) side by side equally.
I tried the flex properties and keep failing. I am new to html and css.

Any help would be greatly appreciated!

Heres my project link:
https://codepen.io/Tsewang/pen/WNQZLbZ

2

None of your CSS has opening brackets “{” Closing brackets “}” or separation “;” or target ">"This is the cause of your issues, all of your CSS is drowning and bumping into each other. You have a lot of issues in your code. Such as a negative 10K left.

HERES THE SOLUTION: replace your top line with this, keep in mind, this will just fix your 1 issue, and place the items how you want them.

@import { url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600) }
.flex-container {
display: flex;
}

fixxx
fixxx1279×429 31.3 KB

After you apply this fix, enclose ALL of your declarations!

1 Like
3

Thank you for your help!

I wanted to redo everything and this is what I have so far,

https://codepen.io/Tsewang/pen/oNjoxXB?editors=1100

I tried to use @mediaquery to get it to be mobile compatible,
Any help with this would be appreciated :pray:

4

Left and right divisions don’t line up height wise.
#1
H1 should incorporate the following code to lign up both boxes height wise.

  padding-top: 0px;
  margin: 0;

Now, compatability wise, it seems ok, however here are a few OPINIONS:

  • “DONATE TO SFT” wraps to the second line, would be better looking if it was on 1 line

  • “Donation amount*”, "Donation type*, "payment Method* should probably be centered for smaller screens.

Although layout is good, the design isnt there yet, do you have a drawing of what you/The Client want it to look like?

EDIT:

Also, I don’t know if you’re at this phase or not, but set background borders (dashed ones, you can also just opt for background-color) for each element, that way you can visually see what’s going on for each element size wise while in design phase.

Also, because this is for a client, you should probably include notes on each sections incase they decide to do more with the page. Also, this would help me locate some errors

Also, I am a newbie, so take all of my advice/opinions with grain of salt.