Media query versus bootstrap / advice on approach

Hello,
I’ve written my project by watching view window in CodePen.
Diferent viewports (full page view and view from my mobile) do not look good. Page appears disproportionate: elements are too small, footer is stretched up to half of the viewport, as oppose to taking a 100% of vieport’s width.

  • With Bootstrap, can I correct all of this with a single media query, or I have to go over elements one by one?

  • Same question for CSS. Can I avoid adjusting elements one by one, perhaps by assigning a class to all the elements, then treat them all with one media query?

Thank you.
Link to my project:

My CSS code:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  width: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container-fluid {
  margin-left: 50px;
}
#quote-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: white;
  color: inherit;
  font-size: 30px;
  border-style: solid;
  border-width: 3px;
  padding: 5px;
  flex-direction: column;
  color: inherit;
  font-family: roboto;
  box-shadow: 0 10px 20px rgba(240, 240, 240);
}

#text {
  padding: 5px 5px 20px 5px;
}

#author {
  padding: 15px 5px 5px 5px;
  display: flex;
  justify-content: flex-end;
}
.button {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 20px;
  color: inherit;
}
#new-quote:hover {
  background-color: #cdcdcd;
  color: #000;
}

#new-quote {
  color: inherit;
  border-style: solid;
  border-width: 2px;
  border-color: inherit;
  padding: 3px;
  font-size: 0.7em;
}
#tweet-quote {
  color: inherit;
  border-style: solid;
  border-width: 2px;
  border-color: inherit;
  padding: 3px;
  font-size: 0.7em;
}
#tweet-quote:hover {
  background-color: #cdcdcd;
  color: #000;
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 30px;
  background-color: #ffff;
}
#footer-text {
  display: flex;
  justify-content: center;
  padding: 5px 5px 5px 5px;
  color: #000000;
  font-size: 0.9em;
}

The simple answer is that there is not a simple solution. I’m happy to look at it and offer some guidance if you’d like

1 Like

Without seeing your project it is hard to give good help. Personally, I would use plain old CSS over Bootstrap. Bootstrap served a purpose long ago before we had the power of CSS media queries. Personally, I think Bootstrap has outlived its usefulness but of course this is just my opinion.

What I would recommend though, regardless of what you choose, is that you use a narrow-first approach for styling your page. Narrow your browser in as far as it will go and make sure it looks good at that narrow width. Only after doing this then you can gradually widen your browser and adjust the layout as you see fit for wider view ports. Using media queries makes this process very easy.

2 Likes

I have amended the post and added CSS code. Any advice is more than welcome.

Yes, I was under the impression of not seing clear benefits of Boostrap. I attributed that to my inexperience.
I added the css code to my post. Any advice is very welcome.

P.S. I can add html code, should it be necessary.

To be honest, we need to see all of it, the HTML and CSS. Preferably a link to a live version of your project.

Basic rule, if you want help then make it very easy for us to help you :slight_smile:

Sorry about that. I put a link to my project. I hope you can see everything.

When I narrow my browser all the way in I am getting a horizontal scroll bar. Use your browser’s dev tools inspector to figure out which element is causing that. I’ll give you a hint, it is being caused because you are setting an unnecessary width on an element that will by default take up the entire width of the browser.

1 Like

footer it is :smiley:
Thanx

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.