Product Landing Page center problem

Product Landing Page center problem
0.0 0

#1

https://codepen.io/zer0fr0st93/full/GGmmmJ/

I don’t have idea what I am doing wrong with #history and #beers and is not in the center :confused:
any help ?


#2

You’re using flex-container, by default it’s orientation is row and you’re justifying its content to space-around which give them space between the icon and the flex-item all equal width… and you’re caption is overlapping cause your video iframe is not responsive. Try wrapping your video iframe in a responsive container

try this: https://www.ostraining.com/blog/coding/responsive-videos/


#3

nothing changed buddy :confused:


#4

what is your desired output for the layout? can you draw it? in-order to control the width of each flex-item you should provide a width for it, like for example set the icon width container to flex: 1 then set the rest of the flex-items to 2 or any number bigger than 1. Try adopting a 12 grid system in flexbox.

example you want a 3 column in 1 row and the center column is bigger try this:

HTML

<div class="flex-container">
  <div class="flex-item one">
    icon here
  </div>
  <div class="flex-item two">
    video iframe here
  </div>
  <div class="flex-item three">
    caption
  </div>
</div>

CSS:

.flex-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-item.one,.flex-item.three{
  flex: 1;
}

.flex-item.two{
  flex: 10;
}

Remember the responsive iframe container will adopt the parent container’s width, so if you set the center flex-item to a bigger width it will inherit it… Try exploring some 12 column grid.


#5

Well there is an improvement with the info you gave me but :

  1. I want the icons under the h2 element.

  2. The video should be in the center under the icon and the history paragraph in the center under the video.

  3. The beers element I want to be in the same size in 3 columns


#6

Have you done any wireframing before? You’re on mac or pc? if mack try sketch or you can google the best for your machine. try to read this: https://blog.capterra.com/free-and-open-source-wireframe-tools/ if you want open source try this: https://pencil.evolus.vn/

If you can’t use any of them try to draw it on a paper and send it as an image here… maybe your html semantic is wrong, draw it and i’ll figure it out.


#7


Something like this


#8

The default flex-direction for your .flex-container is row. That’s why your icon, video and the paragraph are appearing in a row. set flex-direction:column; to your .flex-container. And you set a small width to your .flex-item. That’s why the paragraphs are so narrow. Remove width or set it to some bigger value. After you finish all this you will notice that the icon is stretched to cover the container. Set the align-item:center; for your .icon. And I think you will achieve the desired output. Let me know if you find any problem.

Edit: Set the align-self not align-item property to center.


#9

So all the staff you mentioned worked perfectly.
Although, the video appears to me huge :frowning:
Also the beers element is like a list.
How do I make it like the photo I posted above?


#11

Try using grid that will help you achieve your output easily.
Hope it helps.:blush:


#12

That messed the things :confused:


#13

Can you be more specific ?


#15

Try this: http://jsbin.com/betababoka/edit?html,css,output

Separate your containers into sections that holds your contents so you can customize the css on each sections.

Learn 12 column grids like that from Bootstrap, Materialize CSS, Bulma CSS or make your own with CSS Grid or Flexbox or combine them both.


#16

for the image of beers to appear like a photo, use the html5 tag figure then use css background-size: cover and the background url same as the url of your images. Don’t forget the link i posted earlier.


#17

I am talking about css grid. It is way better than flexbox for the responsive designs. Here’s a link:
https://www.w3schools.com/css/css_grid.asp

You can check about it online on other websites as well.


#18

give your header a z-index: 10;
so that it is not overlapped by other contents.


#19

I made the adjustments as you said to me but still some things are now working as I expected :confused:


#20

For this kind of layout, a css grid is the most appropriate.


#21

So I have to do it from the start again ? :sweat_smile:


#22

It’s up to you, mate :slight_smile: I think it’s the most appropriate for a few major reasons:

  • Less markup == cleaner markup;

  • Less styling rules == less complexity;

  • Highly customizable and easy to control;