Responsive components become concealed if there is limited space available

I'm struggling with figuring out what to write exactly. I have 4 boxes each with a width of 300px. If the document width is around 600px, then only 2 boxes should remain visible on the page while the others are hidden.

Is there a way to make this dynamic using JavaScript or jQuery? Your assistance would be greatly appreciated! ^^

Below is the current setup I have:

HTML

<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>
     <body>
    <article class='Conteiner' id='howItWorks'>
            <section class='Conteiner-Highlight howItWorks-Highlight'>How does it work?</section>
        <section class='Steps'>
          <section class='step'><div class='digit'>1</div><span class='digit-description'>Analyzing <br> customer needs</span></section>

          <section class='step_hidden'><div class='digit'>2</div><span class='digit-description'>Creating a <br> graphic design</span></section>

          <section class='step_hidden'><div class='digit'>3</div><span class='digit-description'>Presenting the client with <br> a proposal</span></section>

          <section class='step_hidden'><div class='digit'>4</div><span class='digit-description'>Starting the <br> website development process</span></section>
        </section>
          <section class='steps-Controls'>
          <span class='steps_check'>
          <i class='material-icons'>radio_button_checked</i>
          <i class='material-icons'>radio_button_unchecked</i>
          <i class='material-icons'>radio_button_unchecked</i>
          <i class='material-icons'>radio_button_unchecked</i>
          </span>
          <span class='steps_arrows'>
            <span class='step_arrow' id='step_arrow_left'><i class='material-icons'>keyboard_arrow_left</i></span>
            <span class='step_arrow' id='step_arrow_right'><i class='material-icons'>keyboard_arrow_right</i></span>
          </span>
        </section>
    </article>
  </body>
</html>

SCSS

:root{
  --red: rgb(231,76,77);
  --white: rgb(242,241,244);
  --darker-blue: rgb(14,60,91);
}

*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
html, body{
  width: 100%;
  height: 100vh;
  color: #0E3C5B;
  font-size: 16px;

}
/* Modern browsers */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
@media screen and (min-width: 50em){
  html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}

.Conteiner-Highlight{
  width: 100%;
  height: 100px;

  font-family: Roboto;
  font-weight: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
  font-size: 1.2rem;

}
.Conteiner{
  width: 100%;
  min-height: 1000px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-bottom: 1px solid rgb(14,60,91);

}
#howItWorks{

  .Steps{
    width: 80%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row;

    .step , .step_hidden{
      max-width: 300px;
      width: 80%;
      max-height: 500px;
      height: 60vh;

      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      box-shadow: 0px 4px 10px rgba(144,144,144,.5);
      margin: 0 50px;
      border-bottom: 10px solid rgb(231,76,77);
      padding: 10px;
      transition: all .3s ease-in-out;
      opacity: 1;


      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .digit{
        height: 40%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3rem;
        font-family: Roboto;
        font-weight: 900;
        color: rgb(231,76,77);
      }
      .digit-description{
        height: 30%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: .5rem;
        font-family: Raleway;
        font-weight: 400;
      }
    }

    .step_hidden{
      opacity: .3;
    }

    .arrow{
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;

    }
  }
  .steps-Controls{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    margin: 50px 0;

    .steps_arrows{
      display: flex;
      flex-flow: row;
      margin: 10px 0;
      cursor:pointer;

      .step_arrow{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 35px;
        height: 35px;
        margin: 0 10px;
        background-color: var(--red);

          i{
            color: var(--white);
          }
      }
    }
    .steps_check{
      display: flex;
      flex-flow: row;
      cursor:pointer;
          i{
            font-size: .4rem;

          }
    }
  }
}

CodePen link

javascriptjquerycssdynamicresponsive

Answer №1

There are multiple approaches to achieve this goal.

One option is to modify the css-container of the elements so that they do not wrap, meaning if there is insufficient space, they will not be visible based on window size. As a result, when resizing the window, you may gradually see 2 + 1/2 elements "disappear."

Alternatively, you can utilize javascript. By creating a function triggered by each resize event, you can implement an if-condition to hide these elements when the window size becomes too small.

Both of these solutions have various examples and resources available for reference. I recommend researching and selecting the one that is most suitable and comprehensible for your specific situation.

edit: Regarding other comments regarding viewport size in relation to your decision-making process, utilizing @media-queries may suffice if you are solely considering the overall viewport size. However, if your criteria involve factors outside of the viewport or layout structure, this approach may not be applicable.

Answer №2

To achieve this, use media queries. By expanding the snippet, you can reveal all other hidden boxes.

.container{
  display: flex;
  flex-direction : row;
}
.container .box{
  margin: 5px;
  background-color : #333;
  width : 50px;
  height: 50px;
}

@media screen and ( max-width: 982px ) {
  .container .box:not(:first-of-type){
    display:none;
  }
}
<div class="container">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>

An example based on your code: https://codepen.io/anon/pen/EeOgxE

Answer №3

I am unsure about how to respond at this moment ;)

If you want, you can avoid using scripts and opt for CSS instead. For instance, if each box is 300px wide and a total of 600px combined, you could implement the following:

/* Displaying 2 */
@media (min-width: 600px) 
{
    .my-container-with-four-boxes {
         width: 600px;
         height: 300px;
         overflow: hidden;
    }
}

/* Displaying 3 */
@media (min-width: 900px) 
{
    .my-container-with-four-boxes {
         width: 900px;
         height: 300px;
         overflow: hidden;
    }
}

/* Displaying 4 */
@media (min-width: 1200px) 
{
    .my-container-with-four-boxes {
         width: 1200px;
         height: 300px;
    }
}

You may need to modify the screen size restrictions and container dimensions by adding padding or some other adjustment not included here ;)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using VueJS: Passing a variable with interpolation as a parameter

Is there a way to pass the index of the v-for loop as a parameter in my removeTask function? I'm looking for suggestions on how to achieve this. <ol class="list-group"> <li v-for="task in tasks" class="list-group-item"> ...

javascriptvue.js

A guide to utilizing Forwarding References in react-router-dom

I have a good grasp on Forwarding Refs and react-router-dom, but I'm struggling with the implementation in this particular scenario. The issue lies in trying to correctly use a function in a child component that sets null in a useState hook. I want th ...

javascriptreactjsreact-router-domuse-refreact-forwardref

Error message: Please provide an expression with const in React JS component

Can you assist me with this issue? I am trying to determine if the user is registered. If they are registered, I want to display the home URL, and if they are not registered, I want to display the registration URL. To do this, I am checking the saved dat ...

javascriptreactjscomponents

Loop over a generated form with fields using ng-repeat

I am facing an issue where I have an ng-repeat loop and I need to submit the values of input fields within it to a generated form. Using ng-model did not work for me. Is there a way to access the input names inside the form tag? <li ng-repeat="group ...

javascriptangularjsformsvalidationangularjs-ng-form

MUI CSS: Mastering image manipulation

My MUI React Component features a Card that contains an image and buttons <Card key={index} className="xl:w-[350px] w-[310px] max-h-[450px]"> <img src={meme.url} className="center bg-cover" alt="" /> <Box cl ...

cssreactjsmaterial-uitailwind-css

The AdminLTE Bootstrap Table Search Bar vanishes when extra <th> tags are added

Currently facing difficulties with the table functionality in AdminLTE. By default, AdminLTE includes a search and organization feature in its table structure. When I insert some table data using PHP, everything looks fine. However, when I attempt to add ...

javascriptphpjquerybootstrap-4adminlte

What causes the child positioning to break when a CSS-Filter is applied to the parent element?

One of my projects includes a title-screen "animation" where the title is initially centered on a fullscreen page and then shrinks and sticks to the top as you scroll down. I have provided a simplified working example below: $(window).scroll( () => ...

csscss-positioncss-transformscss-filters

Transferring Parameters to EJS Template in Node.js

Hey guys, I'm having an issue with rendering a MongoDB record in my .ejs file. Strangely, when I console.log the variable before the end of my route, I get the expected value. However, it becomes undefined in the .ejs file. Here is the code snippet: ...

javascriptnode.jsmongodbmongooseejs

Encountered a React error stating: `TypeError: this.state.projects.map is not a

export default class Timeline extends Component{ state = { projects : [], }; async componentDidMount(){ const response = await api.get("/projects"); this.setState({projects: response.data}); } render(){ return ( <div className ...

javascriptreactjs

In an HTML document, you may encounter whitespace that is not present in JSFiddle

Upon running this HTML file in my browser, I noticed that there is an 18px gap at the top of the first div. It's strange because this issue only occurs when I run the HTML locally on my browser, but everything works fine on JSFiddle. I'm puzzled ...

jqueryhtmlcss

Harnessing JavaScript templates within PHPHow to integrate JavaScript templates

I am currently working on a PHP document where I incorporate 'chapters' (jQuery tabs) in two different ways: Whenever a new chapter is generated, it gets added to the list as well as to the database using JavaScript and Ajax. I have already i ...

javascriptphpjquerymysqltabs

Which special characters are restricted in a JSON.parse function?

I have been encountering a parse error repeatedly after receiving my response. Could it be due to the presence of illegal characters? Below is the response data: [{"businessID": ChIJ49DlQ5NiwokRQ_noyKqlchQ,"latitude": 40.733038,"longitude":-73.6840691,"a ...

javascriptphpgoogle-places-apigoogle-geocoding-api

Verifying the value associated with the "type" attribute of an input field

I need to create test cases for automation testing. My goal is to verify if the password fields in my form contain type="password" attribute for input elements... Is there a way to achieve this using jquery? Thank you. ...

jquerytestcase

When zoomed in, the div background gives off a crisp white appearance

When I zoom in on a div with a background color or border, it appears completely white. Strangely, this issue doesn't happen when I zoom in on the Facebook site. This picture illustrates the problem more clearly. What could be causing this issue? H ...

htmlcssbackground

Tips for incorporating a dynamic CSS style sheet into a standalone xhtml document

I am faced with the task of incorporating two CSS classes into a single xhtml. For instance: Take, for example, display.xhtml, which will be utilized by two different applications, each requiring its own CSS styling. This means that if display.xhtml is ...

htmlcssxhtml

Understanding and Decoding Javascript Error Messages

I'm facing an issue while trying to set up a basic Vue JS application on my local machine, utilizing the materialize-css navbar (). Upon running the app in the terminal, the following error message is displayed. Unable to locate the specified module: ...

javascriptvue.js

Having trouble with jquery.ajax not functioning properly with an asp:button

I have implemented the following code to fetch time from the server. The btnNoP .click function successfully retrieves the correct time, however the asp:Button triggers an Error alert on the page. How can I effectively invoke a webmethod from document.re ...

jqueryasp.netajax

Next.js Error: Unable to access the 'collection' property, as it is undefined

I have recently started using next.js and I am interested in creating a Facebook clone by following YouTube tutorials. However, I keep encountering the error message "Cannot read properties of undefined (reading 'collection')". To troubleshoot, I ...

javascriptreactjsfirebasenext.js

Surround the image with a margin by wrapping text around it

Is it possible to display text in a div with a border and margin around an image using float: right? I have managed to get the text to wrap correctly around the image, but the border is positioned behind the image. UPDATE Here is a snapshot of how I wa ...

css

tricks to override jQuery form validator upon clicking a specific button within the form

With this line of code, I have successfully enabled the jQuery validator to validate specific form fields. <script> $(function() { $( "#date").datepicker( {autoSize: true, dateFormat: 'yy/mm/dd', showAnim: 'show' } ); }); $( ...

phpjqueryformsvalidation