Hi everyone, I’m having trouble with alignment on my page and I’ve been trying to figure out how to have three columns show up side by side without messing up the “About Pacifica Beauty Page” and the “Reviews” page. Any resources or suggestions would be extremely helpful. If there are other mistakes, please let me know. I’ve attached the link to my page below.
I looked at your code a bit. It seems that for
your #featuredproducts, the section was only wrapping the h2 but not the rest of the content
so youre not accessing the entire section that you want to be. Drag and drop this code into the end of your CSS if you want to see what Im talking about. Its a trick I use to debug, just set background colors for sections to make sure Im getting the right area.
\
#aboutpacificabeauty{
background-color: blue;
}
#featuredproducts{
background-color: red;
}
#reviews{
background-color: pink;
}
\
Move the closing tag for featuredproducts to right before the reviews section starts.
Next Id add a div or section and give it the display: flex, putting the opening tag before aboutpacificbeauty starts and putting the closing tag after the end of reviews. The flex-direction is row by default, so youll see that it will line up these 3 sections side by side.
Hope that helps!
Thank you for the suggestions! I want to make it so that my three featured products show together side by side. I moved my ending section to right before the Review page but the images and captions still look distorted. I made the changes so you’re able to see what I’m talking about. My main issue is getting the columns for my three featured products to show up to side to side like the FCC example (I left the CSS you wrote so you see which area I want to fix). The red area is where I want to create the three columns.
Okay cool, so you fixed where the #featuredproducts was wrapping.
So the the next step is make a div with an id that you assign display flex, like this:
/< div id=“flex-container-all” />
//put your 3 sections in here.
/< div />
I just put the extra forward slashes so it would show up so remove those. but anyways.
In the CSS put:
///
#flex-container-all{
display: flex;
}
///
The default flex-direction is set to row, so it lines up all of the direct children, (in this case the 3 sections that you want lined up) all in their own columns.
I made the changes. I’m now having trouble aligning the “Featured Products” section in the center and pushing down the featured products and adjusting the columns so they can be displayed side to side. While I was making adjustments, my navigation bar and featured product’s captions got messed up and I’m trying to figure out what I did wrong. It seems like each time I try to fix something I mess up another section or feature.
I managed to put the three sections in the center but I’m having trouble spacing them out. The featured product’s captions are not aligned and I’m wondering how I can make it so the my navigation menu is spaced out in the center while having the caption’s in the center of each photo without fixing one and messing up the other. Thank you for the help so far!
I took your HTML and laid it out in columns, but had to take out the CSS. heres a link if you want to look at it: https://codepen.io/SilverAndBlack/pen/BVwaed .
I stripped down alot of the css, because you made it look nice for how it was laid out before, but alot of the fixed widths were too big to work in columns and still fit on the page, so it was pushing the last column out. If you use flexbox or relative widths for all of it, it`s alot easier and plays nicer when you want to adjust something.
I altered the HTML a little bit as well and had to take out the container div that you had, because it would make the flex-container-all see it as one column, since it applys itself to it`s direct children. I also had to remove the width and height properties that you had assigned to the videos because this was making them too big to fit in the column. Let me know if you have any questions about it!
also heres a good link to flexbox if youd like to take a look at it:
Thank you so much for the help! This was really helpful!
No problem! Glad to help