Product Landing Page - help and feedback please

Tried to recreate that template page. I got some problems tho and cannot eliminate them:

  1. My “nav-bar” is set on top and it wraps around nicely when screen gets smaller but everything goes below of it for some reason. From what i understand putting position: fixed; puts that container out of “normal” flex composition. I countered this by adding top-margin to element below nav-bar but it does not solve problem on lower resolution screens.
  2. As you can see section with icons and text is ok but for some reason i cannot make those icons equal spaced (so text on right would start always on fixed position - now middle row text starts farther away than rest).

Any other feedback and tricks is appreciated.

2 Likes

Hello @Seruch :slight_smile:
I may be wrong here but since the element is not on the normal hierarchy of the page, I’d just add a media query with a margin from the main container, that way in different screen sizes it’s always on a correct distance.

For a table since it’s bidimensional (rows and columns), I’d use CSS Grid. That way each element is on a same size container that is a column. Even for responsive you just need to change the template on a media query.

On your type of trombones, I’d add a margin to the bottom of the select button, something in the same range as the price to the top of the container.

Footer navigation is glued to the right, I’d increase the padding to the right.

Tip for better code readability: select all your code and go to the top right button on the HTML container and select “Tidy HTML” :wink:

Hope it helps :smiley:

@ alexiorodrigues
Thanks man, i used that trick with setting different top-margin on different @media. Also changed main section to CSS Grid like you suggested. Way better than before. Instead of 26 lines of code its 8 and easier to read.

<div class="grid-container" id="features">
        <div class="l0"> <i class="fas fa-3x fa-burn ico"></i></div>
        <div class="r0"><h4>Premium Materials</h4><p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase. Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p></div>
        <div class="l1"><i class="fa fa-3x fa-truck ico"></i></div>
        <div class="r1"><h4>Fast Shipping</h4><p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied. Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p></div>
        <div class="l2"><i class="fa fa-3x fa-thermometer-three-quarters ico"></i></div>
        <div class="r2"><h4>Quality Assurance</h4><p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument. Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p></div>
</div>

Thanks for feedback.
Cheers!

1 Like