Creating a layout design that adapts seamlessly to different screen

I am currently attempting to create the layout shown below for desktop using Bootstrap v4.3.

https://i.sstatic.net/HCm7z.jpg

This design should transition to the layout displayed below for mobile devices.

https://i.sstatic.net/4Kzad.jpg

However, upon running my code, I end up with the following outcome.

https://i.sstatic.net/sjmUZ.jpg

What could be the issue in the layout in my code?

<body>
<div class="container-fluid shop-page-main-container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3"style="border: 1px solid blue"><!-- Subnav container -->
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-12 col-xl-12" style="border: 1px solid red"><!-- Subnav content A -->
                    <div class="shop-page-subnav-box">
                        <h3 class="shop-page-subnav-box-header">
                            This is content A
                        </h3>
                    </div>

                </div>

                <div class="col-xs-6 col-sm-6 col-md-12 col-lg-12 col-xl-12"  style="border: 1px solid green"><!-- Subnav content B -->
                    <div class="shop-page-subnav-box" style="margin-top: 10px">
                        <h3 class="shop-page-subnav-box-header">
                            This is content B
                        </h3>
                    </div>
                </div>

            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-9" style="border: 1px solid black"><!-- Main content -->
            <div class="shop-page-breadcrumbs">
                <h3 class="shop-page-subnav-box-header">
                    This is main content
                </h3>
            </span>
        </div>
    </div>
</div>
</body>
htmlcsslayoutresponsive-designbootstrap-4

Answer №1

The col-xs class is no longer available in the Bootstrap 4 layout grid. Instead, you should use class="col-6 col-lg-12" on the elements you want to display side by side.

For more information, you can visit: https://getbootstrap.com/docs/4.0/layout/grid/

Answer №2

An issue arises here when the screen width decreases to a certain point, causing the containers to be aligned in their own row. This will require overriding the existing CSS styles. One potential solution could be something like:

@media only screen and (max-width: 600px) { .class {max-width: 200px;} }

It's important not to simply copy and paste, as that approach will not be successful in resolving the issue.

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

What alternative to tables can I utilize that possesses similar attributes?

I have a collection of images all with the same size that I want to use for a slideshow. I would like them to be displayed in a single row, potentially wider than the window itself, and I prefer some of the pictures to extend off the screen rather than wra ...

htmlcsshtml-table

How can I save the complete CSS file using Firebug FireDiff?

While making CSS modifications with Firebug and FireDiff, I've encountered a few mishaps where I mistakenly saved a diff instead of the complete snapshot. This resulted in uploading only one or two changes to my web server and overwriting the entire C ...

cssfirebug

Using TypeScript with Angular, you can easily include parameters to HTML tags

I have an HTML element that looks like this: eventRender(info){ console.log(info.el); } This is the output I'm seeing: https://i.stack.imgur.com/G0hmw.png Now, I want to include these attributes: tooltip="Vivamus sagittis lacus vel augue ...

htmlangulartypescripttooltipelement

What is the best way to create a header similar to the one in the image using only CSS

Wondering if it's possible to create a header like the one in the image using just pure CSS and without Photoshop. How can I design it in a professional manner? You can view an example of the image here. ...

htmlcss

Using brush strokes to create a unique design on the canvas page

Currently, I am working on implementing a brush-like effect on a web page. The task involves providing multiple patterns/textures in the background and allowing users to drag their mouse to create the pattern effect on the page. If you want to see the st ...

javascriptjqueryhtmlcanvashtml5-canvas

Footer Section (navigation) bounces up when scrolling to the beginning of the page

I am currently developing a fully web-based app-style layout. One issue I'm facing is that the navigation menu jumps slightly when I use my S3 to auto-scroll to the top by dragging. However, if I scroll up manually without lifting my finger, this pro ...

javascripthtmlcss

What are some ways to implement drop-down functionality using CSS?

I've been working on tweaking the CSS of this website for what feels like an eternity. I just can't seem to figure out how to make the "medical" menu item drop down to display the rest of the hidden menu items. I've managed to unhide and exp ...

csscontent-management-systemdrupal-7drop-down-menudrupal-themes

Issue with loading a stylesheet from a GitHub raw URL

How are you feeling today? I appreciate your willingness to assist, although I realize this may seem like a trivial question. I am struggling to comprehend why things are not functioning as expected. Within my local directory, I have the following tree s ...

htmlcssgitbootstrap-4glyphicons

What is the best way to specifically target and style a component with CSS in a React application?

I'm facing a small issue with the React modals from Bootstrap in my application. In index.html, I include the following: <link rel="stylesheet" href="/assets/css/bootstrap.min.css"> <link rel="stylesheet" href=& ...

javascriptcssreactjstwitter-bootstrap

Need to delete the product page link on WooCommerce?

I am currently working on fixing the one-page checkout process and I need to remove a single product link from a product picture. The goal is to have only the checkout link displayed on this page, specifically within a quickview view. After trying out var ...

phpcsswordpressfunctionwoocommerce

How can EJS variables be utilized within HTML input fields?

I am facing an issue while trying to use a checkbox to redirect selected users to a new page. I am looking for a solution on how this can be achieved, especially when using mongodb to store the information. Below is my current code snippet: Firstly, I ren ...

htmlnode.jsexpress

Center align the mat-expansion-panel material component in a vertical orientation

When working with the mat-expansion-panel component alongside a mat-accordion, I've encountered an issue where the items are not aligning vertically at the center/middle. I'm unsure of the proper method to achieve vertical alignment for the conte ...

htmlcssangularangular-material

Implement a jQuery feature to gradually increase opacity as the user scrolls and the page loads

On a dynamically loaded page via pjax (except in IE), there are several links at the bottom. Whenever one of these hyperlinks is clicked, the page scrolls to the top while still loading. Although I am okay with this behavior, I'm curious if it' ...

javascriptjqueryhtmlcsspjax

Having trouble with the anchor tag not functioning properly

I'm looking to create a unique video experience by having an iframe video play automatically and opening a third-party video player in a lightbox style when clicked. Currently, the video autoplays, but I want it so that when the user clicks on the vi ...

javascripthtmliframe

How can I position an element to the bottom right using CSS?

Is there a way to position this element to the bottom right corner? HTML <div class="info player"> <div id="job" style="display:none;"><span>Jobname</span></div> <div i ...

css

How to Create a Bootstrap 4 Fixed Bottom Navigation with a Dropup Feature?

After thoroughly researching the site, I have not found a solution that works with this particular approach. In order to create the following template, I utilized Pingendo. .dropup .dropdown-menu { top: auto; bottom: 100%; margin-bottom: .125rem; ...

htmlcsstwitter-bootstrapbootstrap-4

Trouble with jQuery addClass function when trying to add to a specific object variable

I'm attempting to give an error class to an input textbox to inform the user that their input is invalid. Within the change event, I am referencing what seems to be the input field and storing it in a variable. However, calling addClass on the var ...

javascriptjquerycss

Dynamic Bodymovin motion graphics

I'm trying to figure out the best way to embed a bodymovin exported file on my website so that it is responsive, maintains the correct aspect ratio of the logo and fonts, and fits within the borders of the site. Does anyone have any suggestions? Appr ...

htmljsonanimationsvgbodymovin

Icons in Semantic-UI: Facing Difficulty in Accessing ("CORS Request Not HTTP"

Here's an example I'm working on: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Understanding - Main</title> <link rel="stylesheet" type="text/css" href="../semantic/dist/semanti ...

javascriptphphtmlcorssemantic-ui

Validating Forms using Javascript

I'm struggling to understand why I'm not getting any error or success messages when I click the submit button. My goal is to validate strings in an HTML form to ensure they are not null or too long. Both the developer's tools and the Online ...

javascripthtmlvalidation