Responsive sizing trouble

HTML & CSS
1

please see

it falls apart at smaller screens

plese help :slight_smile:

THANKS

2

It would be handy if you could verify your CodePen email, so we can view the pen full screen.

1 Like
3

Here is a starting point with far less code:

2 Likes
4

Archibald,

great!

responsive!

please see

you will see the code is much larger… more width and height… less room on the right and left

what you supplied is smaller

and the text is off

i am after the original size… responsive

i hope i am clear! :slight_smile:

5

You can increase the article’s max-width value or delete the declaratiion but you should consider how the web page will display on a very large monitor with browser window maximised.

Note the article’s flex-basis (currently 450px) largely controls at what browser window width the wrapping happens (affected also by the value of margin)…

You can style the text however you like.

It would look better if you upload the photos with them having the same aspect ratio.

6

@OBXjuggler,

codepen-owner
codepen-owner866Ă—337 25.3 KB

1 Like
7

verified :slight_smile: :slight_smile: :slight_smile:

8

Hi!

help here

do not know much on the flex-basis concept

found this

It will then grow and shrink from that flex-basis. This means that, for example, when the flex-basis of the first item is 200px , it will start out at 200px but then shrink to fit the space available with the other items being at least min-content sized.

what is flex-basis doing for me in my code?

kindly clarify :slight_smile:

or

should i just do this?

am i safe if i keep the same aspect ratio for all photos?

any hic-ups to expect?

any potential problems you can address?

go slow and simple, please

learning curve here…

MANY THANKS!

9

The smallest smartphones have a screen width of 320 pixels (strictly that is CSS pixels) while the largest monitors can have a screen width of over 5000 pixels. Your web page needs to display OK on any screen. Inevitably, that is quite challenging. Using CSS Flexbox is one option to use.

You want your boxes (articles) to squeeze into 320px width when necessary. On the other hand you don’t want your boxes to become too large on large monitors.

For your articles I have used flex: 1 1 450px;

For the container (section) I have used flex-wrap: wrap; and by default the flex-direction is row.

In principle, the browser initially lays out the article boxes within the container each with a width of 450 pixels, wrapping onto more than one row if necessary (as I have enabled wrapping). The first value within the flex declaration is the flex-grow value. I have set this to “1” so allowing the browser to stretch the width of the articles wider than 450px to fill the width available (but constrained by the max-width value). In stretching the widths, the browser will take into account margins (and any gap property).

The second value within the flex declaration is the flex-shrink value. I have set this to “1” otherwise the articles would not shrink as desired when viewed on a smartphone.

I decided to include max-width: 600px; to limit how large an article can grow. I could have restricted the width of the containing section element. Typically restricting the width of elements prevents lines of text becoming unpleasantly long.

Your CodePen contains six boxes, each with <img>, <h1> and <p> elements. You have the option of having three sections, each with two article boxes, or having one section containing all six article boxes. I suggest you opt for the latter: this would allow a browser to place more than two articles within a row on most computer monitors. If a browser places four of the six articles in the first row, there would be two articles in the second row.

Flex-basis is usually described, as you have found, as a starting point from which the browser will grow or shrink items within a Flexbox container. It is not easy to understand the implications of this: how it will affect the appearance of a web page. This is why I pointed out to you in post #5 that it will control at what width wrapping will occur.

With flex-grow and flex-shrink both set to “1” and wrapping enabled the flex-basis can be regarded as a minimun desirable size for an item while still allowing the width (in our case) to reduce to 320 pixels on the smallest smartphones.

I like to use Flexbox because it can allow me to add or delete items within a container without needing to change CSS at all. So for example I have a web page with about 12 items of community news. I can very quickly add or delete items. In fact I have JavaScript that can inhibit display an item advertising an event just after the event has occured. Flexbox will automatically re-arrange the web page for me!

1 Like
11

MANY THANKS!!!

kindly clarify :slight_smile:

ok, have done some research on flex-grow, flex-shrink and flex-basis

flex-basis is where flex-grow and flex-basis start, yes?

say i have a container of 500px

flex-basis is set to 1

the proper flex-item set to flex-grow will grow into the entire remaing space, but stops at a max-width, correct?

say flex-grow is 2

the flex item will take half of the amount of space remaing

you said my code has a flex-grow and flex-shrink of 0 and a flex-basis and a max-width… is this common? a “holy grail” of flex? see what i mean?

please explain

what does having flex-grow, flex-shrink, flex-basis and max width do for me in my code…

why did you choose flex-grow as 1, flex-shrink as 1, flex-basis of 450px (right?) and a max-width of 600px(?)…

i maybe starting to understand the code, but dont get the application :frowning:

please explain flex-shrink… a tricky concept for me :frowning:

please go slow and simple

thanks for

having trouble making the entire background a color…

please help me

thanks!!!

12

In our case flex-basis is ithe initial width used by a browser when laying out the web page. Before making the web page visible a browser will grow or shrink the width (if enabled by flex-grow and flex-shrink).

If one item within a flex container has flex-grow:2 and another item in the same container has flex-grow:1 then the first item will grow twice as much as the second item (starting from the flex-basis of each item and only when there is spare space). I suggest you stick to using 0 or 1 for the moment.

I have been using flex-grow and flex-shrink of 1, not 0. I like to include a value of max-width to avoid elements becoming larger than desirable.

I chose to use flex-grow as 1 so the items within the flex container could become wider than 450px when there is spare width space. You normallly want to set flex-shrink to 1 to allow items to shrink when viewed on smartphones, especially when held in portrait orientation. As mentioned, the width of small smartphones is only 320 pixels. Unless you allow shrinkage, users of smartphones would have to pan the web page or zoom out (which would reduce text size).

Try:

body{
  background: yellow;
}

Here are six article boxes within the section container:

If you have a resonably large computer monitor you will now start to see the power of CSS Flexbox. Try changing the width of your browser window and you will find you can have more than two article boxes in a row. if you drag the width of your browser window so it’s very narrow you will find the article boxes shrink. CSS Flexbox certainly has limitations but all this has been done without any @media media queries. The flex-basis plays an important role.

If your monitor is wide enough to get five article boxes in a row, you would have just one article box in the second row. That box would grow to a ridiculous size if a value of max-width were omitted.

Note I have changed <h1> to <h2> as it is bad practice to have more than one <h1> heading.

1 Like
13

Thank you!

please see

i tweaked your code :slight_smile:

i am happy!

somethings…

item 2 and item 3 have a higher text… this must be simple… please help

yes, its reponsive!

imo though the images are too tight / too small on smaller screens

can we throw a media query to have the image itself shown, minus the darker gree background?

should we loose the text too?

and, please, how can we make the the code more aestheticaly pleasing?

THANKS!!

14

Make the photos have the same aspect ratio before uploading to your server.

This is because I used left padding 20px and right padding 50px to try to emulate the appearance your CodePen in post #1. I suggest using padding: 20px 2% which will centre the photos within the article boxes (with making image width 100%). The percentage value will cause the padding to reduce significantly on smaller screens.

You may like to change padding with a media query.

That depends on what information you wish to convey to your website visitors.

I assume you mean “how can we edit the code to make the web page more aesthetically pleasing?”. You have a rather severe clash of greens of differing hues. In the CodePen below, I have made the body background a lighter shade of the same hue. As magenta is complementary to green, you could try these colours for the body background: you may be surprised how well it works.

background: rgb(128, 0, 128);   /* dark magenta */
background: rgb(255,96,255);    /* light magenta (pink) */

You can try other things in CSS. Some are shown here just for demonstration:

Note in CodePen only the HTML that would be within the <body> part of the HTML should go in CodePen’s HTML box.

15

Archibald,

first thing…

THANK YOU!!!

your code looks awesome!

yes, i will try a magenta background as suggested :slight_smile:

i saw some where that templates can be a good way to learn code…

again, i thank you!

16

Some templates use very sophisticated code.

18

thanks for everything!

i have been tweaking the code, solve a problem

not sure if i got that right…

https://forallthetime.com/obx11/index.html

where is this in my code? what does aspect ratio code look like?

ok, i added a navigation to our code here, a hamburger drop down

unfortunately its mess :frowning:

see

https://forallthetime.com/obx11/index.html

on small screens

can you help me here?

lost cause… too complicated?

try another nav hamburger?

i appreciate you helping me out!

19

Using a browser’s Developer Tools, I can see that on a narrow browser window the height of your <header> is zero . . . .

OXBjuggler1

A quick way to sort this out is to add height:30px; to the CSS for the header.

In the screenshot above you will see that on a narrow browser window the padding between the white border and the left/right edges of the photo appears much less than when on a wide browser window. That is the 2% working!

20

hmmmm. no screen shot :frowning:

problem solved?

did you address the funky drop down hambuger here…

if not, kindly walk me through the solution :slight_smile:

i am not good with dev tools

thanks!

21

The 2% is not solving a problem. It is specifying the left and right padding. I think percentage values work well for this so the apparent width of padding is less on small screens than on large screens.

If you add height:30px; to the CSS for the header does that solve the problem with the hamburger being partly hidden by the photo border on narrow browser widths? (See the hamburger in the screenshot in my previous post #19)

22

i see no screen shot :frowning:

if i add 30px to the header, it distorts the nav, bringing it down too far

if i add no height, no problem

lets try this…

the hamburger is oubviously obscured AND the drop down descends on the first image

kindly tweak my codepen for the proper code

including

MANY THANKS!

i do not mean to frustrate you!

please help me out here :slight_smile:

also, i truly appreciate your time and pateince!