Change a div to be full screen if screen changes to a small screen like a mobile device

Question

Im really struggling to articulate what im trying to achieve, please bear with me on this..

I've got a small "widget" on the left and side of my page. This work fine on bigger screens.

For example, the widget is say 300px wide in the style.

However, If i load the page on a mobile or shrink the window, This becomes unfeasably small. How do i get it to automatically change from 300px to full 100% width if a "smaller" viewspace is observed?

So say, i shrink my window , it would suddenly jump to be 100% wide rather than 300px? ( or similar)

Any ideas?

Sorry if I haven't explained it well enough. I've googled and nothing really sticks out that achieves what im doing.. maybe im not looking for the correct terms.. In a bit of a i dont know what i dont know to google it.

Cheers

Answer 1

What you're trying to say is "How can I make my website responsive?". You can do that with the CSS Media Queries. Check the link and google for more informations.

To give you an idea, just try this:

.my-class{
color: white;
background: black;
width: 300px;
}

@media (max-width: 600px) {
  .my-class {
    width: 100%;
  }
}

<div class="my-class">
    Some text!
<div/>

The break point here is at 600px, for large screens you have the width of the div is at 300px, for small screens you'll get the width taking 100%. (Try to resize the width of the current window while running the snippet to understand how it works).

edit: you can also use as the following style (the idea is in the min-width), if this is what you're looking for.

my-class{
  width: 300px;
  min-width: 100%; /* or 100vw depending on what you want */
}