-1

i need some CSS only code that will use the flexbox and a media query to change with screen size... I want the comment boxes on my page to be moved to the left while the browser is open on a large screen or window. then when the browser window gets smaller i want the comments to shrink a little only down to about 300px where they wont shrink any more

I have linked below two screenshots of what it looks like now and roughly what I am trying to achieve (preferably with the comment boxes being longer as well)

Thanks

cdorr575
  • 1
  • 4
  • 1
    Please provide some code and possibly a mockup of your page layout. – hungerstar Feb 26 '19 at 17:31
  • Specifically, please provide a [mcve] beyond just the media query you have already included. Stack Overflow includes a runnable code snippet feature that allows you to paste HTML, CSS, and JavaScript into separate panes that we can then run to demo your page/code while reading. – TylerH Feb 26 '19 at 17:33
  • You should learn what flexbox is before trying to use it https://css-tricks.com/snippets/css/a-guide-to-flexbox/ If you don't understand the stuff on that page then I suggest you do some tutorials/lessons on css – Huangism Feb 26 '19 at 17:40
  • Based on the images you provided, I'm not sure what this has to do with `flexbox`. You should just need to add `width:100%;` to your comment box to recreate that. – APAD1 Feb 26 '19 at 17:46
  • Is there supposed to be content to the right of the comments on larger displays? Are you trying to create a sidebar that the comments will live in? – hungerstar Feb 26 '19 at 18:01
  • thanks for your comments guys, no i dont need to have anything to the right i just would like it blank , and the comments to be in square boxes to the left (about 25 percent into the page), stacked vertically......... but i want the browser window to respond when i decrease its size untill it wont decrease in size any more – cdorr575 Feb 26 '19 at 19:42

1 Answers1

1

Not sure what your layout is like, but mess around with these properties and feel free to read https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Flexbox Froggy is also a great game for familiarizing yourself with flexbox https://flexboxfroggy.com/ 

main {
  display: flex;
  justify-content: flex-start'; // this will align the items to the left/start of the parent
}

.comment-box {
  width: 33%; // or whatever you want the width to be. Percentages are responsive
}

@media(max-width: 960px){
  main {
    justify-content: center;
  }

  .comment-box{
    width: 95%
    min-width: 300px
  }
}
Mark
  • 1,610
  • 1
  • 14
  • 27