chantalcookware
asked on
Responsive HTML Image Layout
Hello,
I am new to responsive html, and wanted to make a page with images that would shrink or enlarge to max width of the browser without rearranging the image layout.
I have 2 rows with one image each in full width. One row with 3 images, each 1/3 of the max width. And a final row of 2 images, each 50% of the max width. Can this be done without css?
Thank you
I am new to responsive html, and wanted to make a page with images that would shrink or enlarge to max width of the browser without rearranging the image layout.
I have 2 rows with one image each in full width. One row with 3 images, each 1/3 of the max width. And a final row of 2 images, each 50% of the max width. Can this be done without css?
Thank you
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Rob
Do you mean with CSS? Can't do anything responsive without using CSS. Even Javascript will need CSS for the responsive layout should you use JS.
All for using bootstrap. Great suggestion Marco
Hi,
you will need media queries https://www.w3schools.com/css/css_rwd_mediaqueries.asp
and set a % for the image width for each break point
you will need media queries https://www.w3schools.com/css/css_rwd_mediaqueries.asp
and set a % for the image width for each break point
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}ASKER
Thank you. That was perfect
ASKER
Thank you.
Glad to help you :)