I am currently working on creating a row with two columns, one being the left_bar column and the other a large image. My goal is to display only the large image (column 2) when the screen size changes from medium to small breakpoints, hiding the left_bar column (column 1).
Here's an example of how I want it to look like from medium to small screens: https://i.sstatic.net/RfpwF.png
Below you will find my code snippet:
body{
margin: 0;
padding: 0;
}
@media screen and (min-width: 300px) and (max-width: 500px){
}
@media screen and (min-width: 500px) and (max-width: 700px){
}
@media screen and (min-width: 700px) and (max-width: 900px){
}
@media screen and (min-width: 900px) and (max-width: 920px){
}
// CSS styling for left_bar column
.left_bar{
height: 100vh;
background-color: #030C13;
margin: 0;
}
// CSS styling for hero_image column
.hero_image{
width: 100%;
height: 100vh;
background-image: url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
background-position: center;
background-position: right;
background-size: cover;
background-repeat: no-repeat;
}
// More CSS styles...
<!DOCTYPE html>
<html lang="en">
// HTML content goes here...
</html>