Need help with responsiveness and flex box

Code Feedback
1

This was my first product landing page

I had a lot more trouble styling and positioning things than I thought I would. Could anyone please give me some pointers on media query’s? Or something to help this be more responsive?

Also any design input would be really helpful because it looks super boring and I’d love some tips

Thanks in advance!

1 Like
2

hi friend
firstly we will work in header section when you style as you like we go to other sections
1-in header section you should try this
<header>
<div id=“logo”>
<img …></div>
/* div with logo should contain only image */
<nav>…</nav>
</header>
in css
header {
position:fixed;
top:0;left:0;
}
#logo{
float:left;
width:/*width you want */
}
nav{
float:right;width:required;
display:flex;flex-direction:row;
}
header::after{
display:table;clear:both;content:"";
}
for small devices
@media screen and (max-width:768px){
#logo{
width:100%;
float:none;
}
nav{
float:none;width:100%;flex-direction:column;
}
}
2 - put this <meta name=”viewport” content=”width=device-width,initial-scale=1.0”>
in head section in the html paramatre

3

Hi,

So I’m by no means an expert, but I can send along some links for stuff that has been helpful for me:

Design:

Responsiveness + Flexbox:

Hope this helps you along the way!

4

Thank you so much!!! Will try out those changes when I get home

And I will read those articles for sure

2 Likes
5

so ive got everything resizing…kind of lol

the banner image i have resizes but once it gets to a certain width it reveals the background which is a linear gradient gray that doesnt look so good.

What am i missing??

6

hi friend you did good work you should resize the width of the iframe to 100% for extra small devices and for the images because in smaller devices it adds an horizantal srollbar

1 Like
7

You can use background-size: cover; instead of 100%/100%. You may also want to position it background-position: top;

  1. The object-* properties are for img elements not for the background-image property.

  2. The value fixed for background-position is not valid, you likely want background-attachment: fixed;

  3. I don’t think margin-top on the banner is doing what you want, try padding instead. I would also give it a bit more height I think.

#banner{
/*   margin-top: 180px; */
  padding-top: 180px;
  width: 100%;
/*   height: 500px; */
  height: 80vh; /* Or however much you like */
  background-image:  linear-gradient(
          rgba(0, 0, 0, 0.5), 
          rgba(0, 0, 0, 0.4)
        ),url("https://cdn1.thr.com/sites/default/files/imagecache/landscape_928x523/2015/03/the_office_season_1_cast.jpg");
  background-repeat: no-repeat;
/*   background-size:100%, 100%; */
  background-size: cover;
/*   background-position: fixed; */
  background-attachment: fixed;
  background-color: white;
  background-position: top;
/*   object-position: fixed; */
/*   object-fit: cover; */
}
  1. The video is not responsive and will cause an overflow on small screens, search for responsive video to see some code examples.
8

and you inserted a media query inside a #banner-text declaration
#banner-text{
…
@media screen and(){
#banner-text{
}
}
}

9

^ Yes, you did it for #sub-banner-text as well.

Edit: you also have a stray end curly bracket at the end of the CSS.

Click the down arrow on the top right side of the CSS box and use the Analyze CSS function from the drop-down menu. After you have fixed the errors use the Tidy CSS function.

Example: Line 45 Missed semicolon (because you have a colon instead of a semicolon).

10

wow, so very helpful.

thank you so much!

11

hi @pdaford
to remove the horizontal scroll bar when the viewport smaller then 600px
1- for small devices you gave img a width with 100% in media declaration but doesn’t have any effect because .paper-pic with width=500px take advance
change the img selector in media declaration to .paper-pic and add !imporant to 100% of width value
and add box-sizing:border-box; to * selector this will resize all images to 100% of the viewport’s width

12

2- for the video
close the opening tag of div with id=“inner-box”
and change the property width of the #inner-box selector to max-width:600px;
resize the browser to see the difference
and when we are both online we will discuss other things

13

for the menu i don’t know how do you want to style it this is my personal portfolio
if you like my menu’styling we work together for yours
https://codepen.io/ghellabsalah/pen/xgqQJV

1 Like
14

Yes! thats exactly what i was going for, for the nav items to display inline under the logo at mobile view.

dude thank you so much for your help! this stuff would be so hard to solve if i was going at it alone

15

hi friend
for the styling of .paper-pic in media declaration fix the error imporant to important

16

change #logo selector to .logo because you have a class attribute in you logo element
add z-index:1 to the header selector

17

remove display:flex and flex direction and give it a width of auto but with small device keep it 100% for nav selector
if you want to put nav item in horizontal in small devices decrease the padding of li and give it
flex-direction:row;and justify-content:space-between;
if you want to put them in a vertical
flex-direction:column;

18

Try reading: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Check out my example flexbox creation at: https://codepen.io/Mike-was-here123/pen/pqRVpb

CSS lines 73 and below for responsive Media queries

Notes

Please hit the reply button or I do not get notified.

Helpful tools–> https://codepen.io/Mike-was-here123/post/check-out-these-sites

1 Like
19

I would say one thing to do for future projects is to go mobile first (media query min widths) as google penalizes websites that are not mobile first as web traffic continues more towards mobile browsing over desktop.