Another landing page issue

HTML-CSS
1

Hello there- first of all any help here is hugely appreciated!

Spent way longer than I care to admit trying to get this to look how I want and am stumped as to where I’m going wrong.

Here is the pen: https://codepen.io/ryanhunter990/pen/yLVWyBw

In the ‘features’ div I have the three divs- the center one ‘locally grown’ is the one causing me issues. When the view port is larger than 750px it starts to diverge from the others. It seems the < p > inside it, which contains less text than the others is dictating the size of the div or something? I want them to all stay centered as a whole but the text to still bunch up to the left of the icons, as in the example page:

https://codepen.io/freeCodeCamp/full/RKRbwL

I’m sure I’m causing this myself somewhere in the css but can’t identify where…

Thanks for your help, Ryan

2

It’s because you’re centering that section. Imagine a vertical line down the center and remember the pattern. Centering text can make decorative patterns. You probably want everything left aligned but that section moved toward the right.

1 Like
3

Thanks for getting back to me @tlc35us , I took off the justify-content: center; in the container div and it sorted it!

4

Hi @RyanHunter. Very cool webpage.

To keep your desc divs centered evenly do the following

  1. have them each individually inside a div element

  2. have these divs inside a div container

justify-content: center; will center horizontally flex-direction: row;
align-items: center; will center horizontally flex-direction: column;

edit: I just noticed that you solved it before I posted this. Great! :partying_face:

1 Like
5

Thanks for your response and feedback @Problem-solver , I will refer to these tips next time I’m in the same situation :slight_smile:

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.