Building a Responsive Page with Bootstrap 4

I'm currently working on a design page with 2 boxes on the left side and 3 boxes on the right. It looks great on desktop, but I want the boxes to display individually on mobile devices and I'm having trouble figuring it out. Here is my code:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

...

The full code can be found in this JSFiddle link. This HTML and Bootstrap 4 code contains styling for different image categories.

cssbootstrap-4

Answer №1

Replace the dimensions in your code with width:100%;height:100%; instead of width:593px;height:436px;. Additionally, include the following code for a single box in mobile view.

    @media screen and (max-width: 768px){ 
      .left-image {    width: 100%;    margin-right: 0;}
      .right-image { width: 100%;    margin-left: 0;}
    }

    <!DOCTYPE html>
    <html lang="en-US">
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <style>
    /* CSS Styles */

    /* div partition */
    #homecategory {    clear: both;     padding: 0 10px;    max-width: 1230px;    margin: 0 auto;}
    // Additional styling rules here...

    </style>
    </head>
    <body>
    <div id="homecategory" class="home-category ">      
            <div class="cattilewrap">
                <div class="col-12 d-flex justify-content-center catdnamediv1">Shop By</div>
                <div class="col-12 d-flex justify-content-center catdnamediv2"><span>Category</span></div>
             </div>
            <div class="row cf ">

                <div class="col-md-6">
                <div class=" left-image" >
                    <div class="category cat01 fancy-card" style=" background-image:url('_2.jpg');width:100%;height:100%;">       
                        // More category elements...
                    </div>
                </div>
                </div>
                <div class="col-md-6">
                <div class=" right-image" >
                    <div class="category cat03 fancy-card" style=" background-image:url('_1.jpg');width:100%;height:100%;">
                        // More category elements...    
                    </div>
                </div>
                </div>
            </div>
    </div>


    </body>
    </html>

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

Chrome is throwing a syntax error with an unexpected token in jQuery replaceWith

jQuery('div#top').replaceWith('<div id="top"> </div>') When I try to replace the entire content of the top div using jQuery, Chrome gives me an error: "Uncaught SyntaxError: Unexpected token" on the first line. I'm no ...

javascriptjqueryhtmlcss

Ways to stop a tag from causing disruption to the alignment of another

In a div with text-align: center; applied, I have two tags. My issue is that I want one of them to be centered on the same line, while the other is positioned to the right. However, both tags are currently sharing the centered space and extending equally t ...

htmlcssbutton

Not implementing auto-scroll feature because of the presence of `position: sticky` or `position: fixed` CSS properties

I'm encountering a console warning while working on my Nextjs project. Here is the snippet of my code: <aside className={`site-off desktop-hide ${showMenu ? "show-menu" : ""}`}> .... </aside> And here is the relevant ...

cssnext.js

Sidebar Text Remains Visible Despite Collapsed Sidebar

I'm working on implementing a sidebar shrink effect when collapsing it using a combination of custom CSS, jQuery, and Bootstrap. The custom CSS and jQuery handle the shrinking effect, while Bootstrap is used for styling purposes. However, I am facing ...

htmljquerycssbootstrap-5

The scrolling element mirrors the movement of the scrolling window

Can you help me understand how to create a scrolling element that follows the scrolling of the window? I want the element to scroll down when the window reaches the end, and scroll up when the window is at the top. I tried implementing this functionality ...

jqueryhtmlcssscroll

How can I position a vertically centered image to the left of a block paragraph using inline styles?

I am faced with the challenge of aligning a 100x100 vertically-centered image to the left of a text block that extends beyond its height. It is important that the text does not wrap underneath the image but stays in a single block on the right side. I must ...

htmlcssimagepositioninginline-styles

Tips for aligning controls in a column using Bootstrap

My coding issue: <div class="col-lg-4"> <label>Expiration ID</label> <div class="row "> <div class="col-lg-5"> <input type="text" class="form-control input-sm" id="TextIDExpire" /> </div> < ...

htmlcsstwitter-bootstrap

Tips for updating information when a button is chosen

Hello everyone, I need some help with a form that has three select buttons. The button labeled "Distribute" is already selected when the page loads, and it contains information about full name, password, and location. How can I use JavaScript to create a c ...

javascripthtmlcss

The automated test locator in Angular using Protractor is failing to function

I am facing a challenge with my angular web application as there are some elements that are difficult to interact with. One specific element is a checkbox that needs to be checked during testing: ` <div class="row form-group approval_label"> < ...

javascripthtmlcssangularjsangular

Strange gray gradient background suddenly showing up on mobile devices

Encountering an issue with a login form displayed on a sliding modal. The design looks correct on desktop and even in responsive mode with dev tools, but when accessed through mobile Chrome or Safari on an iPhone, an unusual gray rounded box or shadow appe ...

cssreactjstailwind-css

Step-by-step guide on importing popper.js

While it may seem like a simple question, I am struggling to find the answer. How can I import popper.js that comes with Bootstrap 4 beta? I am using Bower and have successfully installed Bootstrap 4 beta. However, in the bower_components folder, there is ...

javascriptbootstrap-4popper.js

The orientation of Bootstrap flex - horizontal row or vertical column -

Bootstrap operates based on the class assigned to the parent element for flex row/column behavior. .bd-highlight { background-color: rgba(86, 61, 124, .15); border: 1px solid rgba(86, 61, 124, .15); } <link href="https://stackpath.bootstrapcdn.co ...

cssflexboxbootstrap-4

Combining photos seamlessly and bringing them to life through animation upon window loading

My main goal is to seamlessly fit the images together, but I'm struggling to achieve this. I tried using masonry, but unfortunately it didn't work for me. All I want is to tightly pack the divs together. For instance, in my fiddle example, I woul ...

javascriptjqueryhtmlcss

Struggles with arranging HTML header components

I've been attempting to insert a Twitter logo into the header of my website (which is styled using Bootstrap CSS), but unfortunately, it's causing some alignment issues. My initial goal was to position them next to each other, however, they ended ...

csshtmltwitter-bootstrapalignment

Designing a unique customized top navigation bar in Magento 1.9.2

I recently attempted to create a unique top menu in magento 1.9.2 by modifying the Navigation.php file located at app/code/core/Mage/catalog/Block/. I added some custom classes in an effort to customize the menu. In order to achieve this customization, I ...

phpcsstwitter-bootstrapmagento

Adjust Vue FilePond dimensions

I am currently working with a Vue Filepond and trying to ensure that it fills the height of its container. My Vue Filepond setup also involves Vuetify. Whenever I attempt to set values in the CSS, they are constantly overridden by 76px. Although fill-hei ...

javascriptcssvue.jsfilepond

A crisscrossing dashed design running along the edges of the text block

<div class="search"> <p>SEARCH</p> </div> https://i.sstatic.net/yxOga.png I am attempting to incorporate a dashed lateral padding similar to the one shown in the image, but only on the sides of the text. Is there a method I can ...

htmlcss

In Firefox, right floated elements vanish when utilizing columns

Utilizing the ol element with column-count and column-gap properties to organize the list into 2 columns, each list item contains a span element floated right. However, I am encountering an issue where the span element is not displayed for certain items li ...

htmlcssfirefox-quantum

What is the best way to have three divs displayed in a row - either all inline or all block, without having two displayed inline and one displayed

I am facing an issue with a set of three inline divs that need to be displayed either in a row or in a column if they do not fit within their container width. In cases where the container is too narrow for them to fit in one row, but not narrow enough to c ...

htmlcss

Adjusting the alignment of button text in an Angular Kendo grid

I am currently utilizing the grid view feature of Kendo UI for Angular. While I have buttons on the grid, the issue is that the text within the buttons is not centered properly despite applying styles such as text-align:center. Here is the template for my ...

cssangularkendo-ui