I'm looking for tips on how to create a responsive wrapper class within a jumbotron. My experience with this is

I am struggling to make the wrapper class responsive. I have searched everywhere for answers but haven't found a solution yet. Hopefully, I can find some help here:

.jumbotron { 
   overflow: hidden;
    background-color:whitesmoke;
    opacity:1.0;
}
.goodat{
    color: #ffc107;
    text-align:center;
}
.goodat:hover{
    color:#F64672;
}
.wrapper {
    margin: 40px auto;
    width: 2500px;
    height: 500px;
  }
  .wrapper::before, .wrapper::after {
    content: "";
    display: table;
    clear: both;
  }
  .wrapper .panel {
    position: relative;
    margin: 50px 20px;
    padding: 0 20px 20px;
    overflow: hidden;
    float: left;
    width: 270px;
    height: 450px;
    text-align: center;
    background: #F1F1F1;
    border: 1px solid #30bb57;
    box-sizing: border-box;
    transition: border 200ms ease;
    cursor: pointer;
  }
  // Other CSS properties…

</div>

I have attempted using multiple CSS properties to modify the responsiveness of the wrapper class but have not been successful. No error messages are displayed, just unable to achieve the desired results.

htmlcssbootstrap-4

Answer №1

Here is a better CSS code snippet for the wrapper:

       .wrapper {
       overflow-wrap: break-word; 
       width: 90%;
       margin: auto;
       height: 500px;
     }

By setting the width to a percentage, the page will adjust according to the window size.

The overflow wrap feature ensures that text is properly wrapped when it exceeds the container size.

Answer №2

Is this the solution you were seeking? I made a modification, changing the wrapper width to 'max-width' instead of 'width', and you can tailor the media queries according to your screen requirements.

.jumbotron { 
      overflow: hidden;
      background-color: whitesmoke;
      opacity: 1.0;
}
.goodat{
    color: #ffc107;
    text-align: center;
}
...
...
@media (max-width:767px){
    .wrapper .panel{
        width:100%;
        margin:0 0 25px 0;
    }
}
<div class="jumbotron jumbotron-fluid">
        <div class="goodat">
               <i><h2>We Are Good At</h2></i>
        </div>
        <div class="wrapper">
            ...{/*content omitted for brevity*/}...
        </div>

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

Align a single item to the right in PrimeNG p-menubar

I am currently utilizing PrimeNG 8.1.1 and I am looking for a way to align one of the items to the right side (specifically the submenu options of logout and profile). Does anyone have any suggestions? this._menuItems = [ { labe ...

cssangularprimeng

Utilizing CSS Media Queries for Page Layout Adaptation

After previously asking about a different issue with this project, I have encountered yet another problem. The task at hand requires using three distinct media queries to alter the page layout depending on the screen size in use (currently being tested by ...

htmlcssmedia-queries

My website experiencing issues due to Firefox 23.0.1 altering the CSS and causing disruptions

After setting up a test site for a client to review as part of a proof of concept, I noticed an unexpected white line while checking across different browsers. (loading correctly in all browsers except FF) In Firefox, there appears to be a thin ~10px li ...

htmlcssfirefoxbackground-color

Techniques for breaking down large CSS files into modules and combining multiple smaller CSS files

My website's CSS file is currently massive, containing site-wide selectors in a file named Mondo.css. While this setup has been effective for ensuring users only need to download the file once, I've recently developed a widget that requires its o ...

cssbrowserlessaggregation

User verification and sign-ins - Bootstrap - Tabbed Navigation

My primary concern is security, but I also seek advice on the most efficient method: Initially, I created a website that loaded a new html/php file for each tab. However, I recently switched to using Bootstrap and nav-tabs to streamline the website and en ...

phpjqueryhtmlajaxauthentication

Locked first row and first column in HTML table

I'm struggling with freezing the first row and column in an HTML file exported from Microsoft Excel. When attempting to add position:fixed; to achieve this, I noticed that it changes the size and alignment of the headers. Can someone please advise me ...

javascripthtmlcss

What is the best method for deleting siblings from the DOM structure?

Here is some code that currently functions: a.parentNode.removeChild(a); But now, I also want to remove the previous sibling of this child element. How can I modify the code to achieve this? Is there any documentation on MDN that can help me with this ...

javascripthtmldom

Apply an opacity setting of 0.5 to the specific segment representing 30% of the scrollable div

I have a scrollable container for displaying messages. I would like to apply an opacity of 0.5 to the content in the top 30% of the container, as shown in this image: https://i.stack.imgur.com/NHlBN.png. However, when I tried using a background div with a ...

javascripthtmlcssreactjs

Changing the animation associated with a hover action - tips and tricks!

My navigation header includes links to various websites, some of which are displayed as drop-down menus. I have implemented an animation and style change on hover to visually indicate the active link and display all available options in case of a dropdown ...

htmlcssvue.jshovercss-animations

Modify the class of the dropdown and heading 2 elements if they meet specific conditions using Animate.css

Is it possible to add a class using jQuery when two specific conditions are met? 1) If the dropdown selection is either "acting" or "backstage" 2) If the membership status is set to "Non-member" If both of these requirements are fulfilled, I would like ...

javascriptjqueryhtmlcssanimate.css

Why is having <html lang="en"> essential?

Is the tag essential for website development? Will my code be impacted if I choose not to include it? ...

htmlcss

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Recently, I've been working on a document that features a top navigation with 4 different links. Each time a link is clicked, a div right below it changes its size accordingly. My goal now is to implement the use of cookies to remember the last select ...

javascriptjqueryhtmlcsscookies

Modifying HTML attributes using AngularJS

Is there a straightforward method to dynamically alter an HTML attribute? I've used Angular's scope variable and ng-hide to hide a div, but the size of the div remains unchanged. How can I adjust the size of that particular div? I attempted th ...

htmlangularjs

Error encountered in Angular CLI: Attempting to access property 'value' of an undefined variable

I am encountering an issue while trying to retrieve the values of radio buttons and store them in a MySql database. The error message I receive is TypeError: Cannot read property 'value' of undefined. This project involves the use of Angular and ...

javascripthtmlangulartypescriptexpress

What is the process of enabling scrolling on the main panel once scrolling on the sidebar has concluded?

How can I achieve a scrolling behavior similar to the one demonstrated here? When scrolling through the sidebar, I want it to continue scrolling until it reaches the end. After that, any further scrolling on the sidebar should scroll the main panel inste ...

javascripthtmlcssscroll

The section cannot be shown in a flex layout within a grid container

My goal is to showcase a grid layout containing multiple sections within a div, but I'm encountering an issue where the sections are only displaying as blocks. I am seeking assistance in making the second portion of the data appear flexed. Currently, ...

htmlcssvue.js

Turning off a hyperlink with jQuery

Is there a way to effectively disable a link in jQuery without changing the anchor's href attribute? I initially tried setting disabled to true, but it seems that approach isn't working as expected. The goal is to prevent the user from being redi ...

javascriptjqueryhtml

What is the best way to incorporate multiple countdown timers on a single HTML page?

I am in the process of developing an online auction site and I need to include the end time and date for each auction. To achieve this, I have created a countdown.js file with the following code: // set the date we're counting down to var target_dat ...

javascripthtmlcountdowntimer

JavaScript - Clear the localStorage when closing the final tab of a website

Currently, I am working with AngularJS and utilizing $window.localStorage to store the username of a logged-in user. Since localStorage needs to be explicitly deleted, I have implemented an event listener for $(window).on('unload', function(){}) ...

javascriptjqueryangularjshtmltabs

Replacing scrollbars of a div using overflow:auto with arrow indicators: A step-by-step guide

Currently, I am in the process of creating a small div element that will enable users to scroll between images within a jquery image zoom plugin designed for an eCommerce website. Below is the code snippet that I have developed thus far: <div style="w ...

javascriptjqueryhtmlcss