Change design after size change with Bootstrap 4

This will be lot's of typing involved.

I've got a page I need to slightly change design when the size is decreased. Including but not limited to some parts of menus swapping places and extra design features on some fields

At the moment I am trying to strictly stick to Bootstrap 4 documentation on responsive breakpoints (https://getbootstrap.com/docs/4.0/layout/overview/)

Just giving an example of one of the menus

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Navigation Menu</title>

    

    <script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>

    <script>window.jQuery || document.write('<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>')</script>

    <script src="Libs/Popper/popper.min.js"></script>

    <script src="Libs/Bootstrap/js/bootstrap.bundle.js"></script>

    

    <link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap.css" media="all">

    <link rel="stylesheet" type="text/css" href="Css/TopMenu.css" media="all">

    

</head>

    

<body>



<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-menu">



    <a class="navbar-brand" href="#"><img src="Images/logo.png" alt="Logo">

        <!-- Carousel -->

    </a>



    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

    </button>



    <div class="collapse navbar-collapse main-navbar" id="main-navbar">



        <ul class="nav navbar-nav mr-auto navbar-one" id="navbar-one">

            <li class="nav-item">

                <a class="nav-link" href="#">PRODUKTE</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">DIENSTLEISTUNGEN</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">UNTERNEHMEN</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">NEWSROOM-STORY</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">SPOTLIGHT:TECHNIK

                    <?php //echo $spotlight; ?>

                </a>

            </li>

        </ul>

        

        <ul class="nav navbar-nav smaller_font mr-auto navbar-two" id="navbar-two">

            <li class="nav-item">

                <a class="nav-link text-danger" href="#">KUNDEN-COCKPIT</a>

            </li>

            <li class="nav-itemv">

                <a class="nav-link text-danger" href="#">SHOP</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">DATENSCHUTZ</a>

            </li>

            <li class="nav-itemv">

                <a class="nav-link" href="#">KONTAKT</a>

            </li>

        </ul>

        

        <!-- Language Menu -->

        <ul class="nav navbar-nav mr-auto language-menu" id="language-menu">

            <li class="nav-item">

                <a class="nav-link" href="#">DE</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">EN</a>

            </li>

        </ul>



    </div>



</nav>

    

</body>

</html>

And the extra css is as follows

.smaller_font{

    font-size: 80%;

}



@include media-breakpoint-down(md){

    .main-navbar{

        border-bottom: solid 1px;

    }

}

At the moment I am trying to use @include media-breakpoint-down(md){...}
But I get no reaction from the design which does absolutely NOTHING when I decrease the size.

The idea is that the fields in the menu are going to have 1px bottom border.

I know that there's also an option of making invisible elements and then making them visible as discussed here bootstrap 4 responsive utilities visible / hidden xs sm lg not working

or setting width in pixels with "@media" tag but using "@include media-breakpoint-down()" tag seems to make more sense overall (just a gut feeling).

I need someway to get things to work on small scale, so that I can build from there :-)

asked Dec 21 at 15:41

Yuriy Semenikhin

334

add a comment |

This will be lot's of typing involved.

I've got a page I need to slightly change design when the size is decreased. Including but not limited to some parts of menus swapping places and extra design features on some fields

At the moment I am trying to strictly stick to Bootstrap 4 documentation on responsive breakpoints (https://getbootstrap.com/docs/4.0/layout/overview/)

Just giving an example of one of the menus

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Navigation Menu</title>

    

    <script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>

    <script>window.jQuery || document.write('<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>')</script>

    <script src="Libs/Popper/popper.min.js"></script>

    <script src="Libs/Bootstrap/js/bootstrap.bundle.js"></script>

    

    <link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap.css" media="all">

    <link rel="stylesheet" type="text/css" href="Css/TopMenu.css" media="all">

    

</head>

    

<body>



<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-menu">



    <a class="navbar-brand" href="#"><img src="Images/logo.png" alt="Logo">

        <!-- Carousel -->

    </a>



    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

    </button>



    <div class="collapse navbar-collapse main-navbar" id="main-navbar">



        <ul class="nav navbar-nav mr-auto navbar-one" id="navbar-one">

            <li class="nav-item">

                <a class="nav-link" href="#">PRODUKTE</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">DIENSTLEISTUNGEN</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">UNTERNEHMEN</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">NEWSROOM-STORY</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">SPOTLIGHT:TECHNIK

                    <?php //echo $spotlight; ?>

                </a>

            </li>

        </ul>

        

        <ul class="nav navbar-nav smaller_font mr-auto navbar-two" id="navbar-two">

            <li class="nav-item">

                <a class="nav-link text-danger" href="#">KUNDEN-COCKPIT</a>

            </li>

            <li class="nav-itemv">

                <a class="nav-link text-danger" href="#">SHOP</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">DATENSCHUTZ</a>

            </li>

            <li class="nav-itemv">

                <a class="nav-link" href="#">KONTAKT</a>

            </li>

        </ul>

        

        <!-- Language Menu -->

        <ul class="nav navbar-nav mr-auto language-menu" id="language-menu">

            <li class="nav-item">

                <a class="nav-link" href="#">DE</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">EN</a>

            </li>

        </ul>



    </div>



</nav>

    

</body>

</html>

And the extra css is as follows

.smaller_font{

    font-size: 80%;

}



@include media-breakpoint-down(md){

    .main-navbar{

        border-bottom: solid 1px;

    }

}

At the moment I am trying to use @include media-breakpoint-down(md){...}
But I get no reaction from the design which does absolutely NOTHING when I decrease the size.

The idea is that the fields in the menu are going to have 1px bottom border.

I know that there's also an option of making invisible elements and then making them visible as discussed here bootstrap 4 responsive utilities visible / hidden xs sm lg not working

or setting width in pixels with "@media" tag but using "@include media-breakpoint-down()" tag seems to make more sense overall (just a gut feeling).

I need someway to get things to work on small scale, so that I can build from there :-)

asked Dec 21 at 15:41

Yuriy Semenikhin

334

add a comment |

This will be lot's of typing involved.

I've got a page I need to slightly change design when the size is decreased. Including but not limited to some parts of menus swapping places and extra design features on some fields

At the moment I am trying to strictly stick to Bootstrap 4 documentation on responsive breakpoints (https://getbootstrap.com/docs/4.0/layout/overview/)

Just giving an example of one of the menus

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Navigation Menu</title>

    

    <script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>

    <script>window.jQuery || document.write('<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>')</script>

    <script src="Libs/Popper/popper.min.js"></script>

    <script src="Libs/Bootstrap/js/bootstrap.bundle.js"></script>

    

    <link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap.css" media="all">

    <link rel="stylesheet" type="text/css" href="Css/TopMenu.css" media="all">

    

</head>

    

<body>



<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-menu">



    <a class="navbar-brand" href="#"><img src="Images/logo.png" alt="Logo">

        <!-- Carousel -->

    </a>



    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

    </button>



    <div class="collapse navbar-collapse main-navbar" id="main-navbar">



        <ul class="nav navbar-nav mr-auto navbar-one" id="navbar-one">

            <li class="nav-item">

                <a class="nav-link" href="#">PRODUKTE</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">DIENSTLEISTUNGEN</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">UNTERNEHMEN</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">NEWSROOM-STORY</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">SPOTLIGHT:TECHNIK

                    <?php //echo $spotlight; ?>

                </a>

            </li>

        </ul>

        

        <ul class="nav navbar-nav smaller_font mr-auto navbar-two" id="navbar-two">

            <li class="nav-item">

                <a class="nav-link text-danger" href="#">KUNDEN-COCKPIT</a>

            </li>

            <li class="nav-itemv">

                <a class="nav-link text-danger" href="#">SHOP</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">DATENSCHUTZ</a>

            </li>

            <li class="nav-itemv">

                <a class="nav-link" href="#">KONTAKT</a>

            </li>

        </ul>

        

        <!-- Language Menu -->

        <ul class="nav navbar-nav mr-auto language-menu" id="language-menu">

            <li class="nav-item">

                <a class="nav-link" href="#">DE</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">EN</a>

            </li>

        </ul>



    </div>



</nav>

    

</body>

</html>

And the extra css is as follows

.smaller_font{

    font-size: 80%;

}



@include media-breakpoint-down(md){

    .main-navbar{

        border-bottom: solid 1px;

    }

}

At the moment I am trying to use @include media-breakpoint-down(md){...}
But I get no reaction from the design which does absolutely NOTHING when I decrease the size.

The idea is that the fields in the menu are going to have 1px bottom border.

I know that there's also an option of making invisible elements and then making them visible as discussed here bootstrap 4 responsive utilities visible / hidden xs sm lg not working

or setting width in pixels with "@media" tag but using "@include media-breakpoint-down()" tag seems to make more sense overall (just a gut feeling).

I need someway to get things to work on small scale, so that I can build from there :-)

asked Dec 21 at 15:41

Yuriy Semenikhin

334

This will be lot's of typing involved.

I've got a page I need to slightly change design when the size is decreased. Including but not limited to some parts of menus swapping places and extra design features on some fields

At the moment I am trying to strictly stick to Bootstrap 4 documentation on responsive breakpoints (https://getbootstrap.com/docs/4.0/layout/overview/)

Just giving an example of one of the menus

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Navigation Menu</title>

    

    <script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>

    <script>window.jQuery || document.write('<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>')</script>

    <script src="Libs/Popper/popper.min.js"></script>

    <script src="Libs/Bootstrap/js/bootstrap.bundle.js"></script>

    

    <link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap.css" media="all">

    <link rel="stylesheet" type="text/css" href="Css/TopMenu.css" media="all">

    

</head>

    

<body>



<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-menu">



    <a class="navbar-brand" href="#"><img src="Images/logo.png" alt="Logo">

        <!-- Carousel -->

    </a>



    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

    </button>



    <div class="collapse navbar-collapse main-navbar" id="main-navbar">



        <ul class="nav navbar-nav mr-auto navbar-one" id="navbar-one">

            <li class="nav-item">

                <a class="nav-link" href="#">PRODUKTE</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">DIENSTLEISTUNGEN</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">UNTERNEHMEN</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">NEWSROOM-STORY</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">SPOTLIGHT:TECHNIK

                    <?php //echo $spotlight; ?>

                </a>

            </li>

        </ul>

        

        <ul class="nav navbar-nav smaller_font mr-auto navbar-two" id="navbar-two">

            <li class="nav-item">

                <a class="nav-link text-danger" href="#">KUNDEN-COCKPIT</a>

            </li>

            <li class="nav-itemv">

                <a class="nav-link text-danger" href="#">SHOP</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">DATENSCHUTZ</a>

            </li>

            <li class="nav-itemv">

                <a class="nav-link" href="#">KONTAKT</a>

            </li>

        </ul>

        

        <!-- Language Menu -->

        <ul class="nav navbar-nav mr-auto language-menu" id="language-menu">

            <li class="nav-item">

                <a class="nav-link" href="#">DE</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">EN</a>

            </li>

        </ul>



    </div>



</nav>

    

</body>

</html>

And the extra css is as follows

.smaller_font{

    font-size: 80%;

}



@include media-breakpoint-down(md){

    .main-navbar{

        border-bottom: solid 1px;

    }

}

At the moment I am trying to use @include media-breakpoint-down(md){...}
But I get no reaction from the design which does absolutely NOTHING when I decrease the size.

The idea is that the fields in the menu are going to have 1px bottom border.

I know that there's also an option of making invisible elements and then making them visible as discussed here bootstrap 4 responsive utilities visible / hidden xs sm lg not working

or setting width in pixels with "@media" tag but using "@include media-breakpoint-down()" tag seems to make more sense overall (just a gut feeling).

I need someway to get things to work on small scale, so that I can build from there :-)

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Navigation Menu</title>

    

    <script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>

    <script>window.jQuery || document.write('<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>')</script>

    <script src="Libs/Popper/popper.min.js"></script>

    <script src="Libs/Bootstrap/js/bootstrap.bundle.js"></script>

    

    <link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap.css" media="all">

    <link rel="stylesheet" type="text/css" href="Css/TopMenu.css" media="all">

    

</head>

    

<body>



<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-menu">



    <a class="navbar-brand" href="#"><img src="Images/logo.png" alt="Logo">

        <!-- Carousel -->

    </a>



    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

    </button>



    <div class="collapse navbar-collapse main-navbar" id="main-navbar">



        <ul class="nav navbar-nav mr-auto navbar-one" id="navbar-one">

            <li class="nav-item">

                <a class="nav-link" href="#">PRODUKTE</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">DIENSTLEISTUNGEN</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">UNTERNEHMEN</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">NEWSROOM-STORY</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">SPOTLIGHT:TECHNIK

                    <?php //echo $spotlight; ?>

                </a>

            </li>

        </ul>

        

        <ul class="nav navbar-nav smaller_font mr-auto navbar-two" id="navbar-two">

            <li class="nav-item">

                <a class="nav-link text-danger" href="#">KUNDEN-COCKPIT</a>

            </li>

            <li class="nav-itemv">

                <a class="nav-link text-danger" href="#">SHOP</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">DATENSCHUTZ</a>

            </li>

            <li class="nav-itemv">

                <a class="nav-link" href="#">KONTAKT</a>

            </li>

        </ul>

        

        <!-- Language Menu -->

        <ul class="nav navbar-nav mr-auto language-menu" id="language-menu">

            <li class="nav-item">

                <a class="nav-link" href="#">DE</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">EN</a>

            </li>

        </ul>



    </div>



</nav>

    

</body>

</html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Navigation Menu</title>

    

    <script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>

    <script>window.jQuery || document.write('<script src="Libs/JQuery/jquery-3.3.1.slim.min.js"></script>')</script>

    <script src="Libs/Popper/popper.min.js"></script>

    <script src="Libs/Bootstrap/js/bootstrap.bundle.js"></script>

    

    <link rel="stylesheet" type="text/css" href="Libs/Bootstrap/css/bootstrap.css" media="all">

    <link rel="stylesheet" type="text/css" href="Css/TopMenu.css" media="all">

    

</head>

    

<body>



<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-menu">



    <a class="navbar-brand" href="#"><img src="Images/logo.png" alt="Logo">

        <!-- Carousel -->

    </a>



    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

    </button>



    <div class="collapse navbar-collapse main-navbar" id="main-navbar">



        <ul class="nav navbar-nav mr-auto navbar-one" id="navbar-one">

            <li class="nav-item">

                <a class="nav-link" href="#">PRODUKTE</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">DIENSTLEISTUNGEN</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">UNTERNEHMEN</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">NEWSROOM-STORY</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">SPOTLIGHT:TECHNIK

                    <?php //echo $spotlight; ?>

                </a>

            </li>

        </ul>

        

        <ul class="nav navbar-nav smaller_font mr-auto navbar-two" id="navbar-two">

            <li class="nav-item">

                <a class="nav-link text-danger" href="#">KUNDEN-COCKPIT</a>

            </li>

            <li class="nav-itemv">

                <a class="nav-link text-danger" href="#">SHOP</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">DATENSCHUTZ</a>

            </li>

            <li class="nav-itemv">

                <a class="nav-link" href="#">KONTAKT</a>

            </li>

        </ul>

        

        <!-- Language Menu -->

        <ul class="nav navbar-nav mr-auto language-menu" id="language-menu">

            <li class="nav-item">

                <a class="nav-link" href="#">DE</a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="#">EN</a>

            </li>

        </ul>



    </div>



</nav>

    

</body>

</html>

.smaller_font{

    font-size: 80%;

}



@include media-breakpoint-down(md){

    .main-navbar{

        border-bottom: solid 1px;

    }

}

.smaller_font{

    font-size: 80%;

}



@include media-breakpoint-down(md){

    .main-navbar{

        border-bottom: solid 1px;

    }

}

html css responsive-design bootstrap-4 responsive

asked Dec 21 at 15:41

Yuriy Semenikhin

334

asked Dec 21 at 15:41

Yuriy Semenikhin

334

asked Dec 21 at 15:41

Yuriy Semenikhin

334

asked Dec 21 at 15:41

Yuriy Semenikhin

334

asked Dec 21 at 15:41

Yuriy Semenikhin

334

add a comment |

2 Answers
2

active

oldest

votes

"At the moment I am trying to use @include
media-breakpoint-down(md){...} But I get no reaction from the design
which does absolutely NOTHING when I decrease the size."

This isn't CSS...

@include media-breakpoint-down(md){

    .main-navbar{

        border-bottom: solid 1px;

    }

}

It's SASS. SASS is "compiled" into CSS server-side using a SASS processor. The browser doesn't understand SASS, it only understands CSS.

answered Dec 21 at 16:03

Zim

182k47381367

I'm so not a front end expert... :-( Is there a css alternative to that statement?
– Yuriy Semenikhin
yesterday

add a comment |

-1

Some good info found here so decided to go with imperfect, but still good solution of creating invisible object in your code.

answered yesterday

Yuriy Semenikhin

334

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53887456%2fchange-design-after-size-change-with-bootstrap-4%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

"At the moment I am trying to use @include
media-breakpoint-down(md){...} But I get no reaction from the design
which does absolutely NOTHING when I decrease the size."

This isn't CSS...

@include media-breakpoint-down(md){

    .main-navbar{

        border-bottom: solid 1px;

    }

}

It's SASS. SASS is "compiled" into CSS server-side using a SASS processor. The browser doesn't understand SASS, it only understands CSS.

answered Dec 21 at 16:03

Zim

182k47381367

I'm so not a front end expert... :-( Is there a css alternative to that statement?
– Yuriy Semenikhin
yesterday

add a comment |

"At the moment I am trying to use @include
media-breakpoint-down(md){...} But I get no reaction from the design
which does absolutely NOTHING when I decrease the size."

This isn't CSS...

@include media-breakpoint-down(md){

    .main-navbar{

        border-bottom: solid 1px;

    }

}

It's SASS. SASS is "compiled" into CSS server-side using a SASS processor. The browser doesn't understand SASS, it only understands CSS.

answered Dec 21 at 16:03

Zim

182k47381367

I'm so not a front end expert... :-( Is there a css alternative to that statement?
– Yuriy Semenikhin
yesterday

add a comment |

"At the moment I am trying to use @include
media-breakpoint-down(md){...} But I get no reaction from the design
which does absolutely NOTHING when I decrease the size."

This isn't CSS...

@include media-breakpoint-down(md){

    .main-navbar{

        border-bottom: solid 1px;

    }

}

It's SASS. SASS is "compiled" into CSS server-side using a SASS processor. The browser doesn't understand SASS, it only understands CSS.

answered Dec 21 at 16:03

Zim

182k47381367

"At the moment I am trying to use @include
media-breakpoint-down(md){...} But I get no reaction from the design
which does absolutely NOTHING when I decrease the size."

This isn't CSS...

@include media-breakpoint-down(md){

    .main-navbar{

        border-bottom: solid 1px;

    }

}

It's SASS. SASS is "compiled" into CSS server-side using a SASS processor. The browser doesn't understand SASS, it only understands CSS.

answered Dec 21 at 16:03

Zim

182k47381367

answered Dec 21 at 16:03

Zim

182k47381367

answered Dec 21 at 16:03

Zim

182k47381367

answered Dec 21 at 16:03

Zim

182k47381367

I'm so not a front end expert... :-( Is there a css alternative to that statement?
– Yuriy Semenikhin
yesterday

add a comment |

I'm so not a front end expert... :-( Is there a css alternative to that statement?
– Yuriy Semenikhin
yesterday

I'm so not a front end expert... :-( Is there a css alternative to that statement?
– Yuriy Semenikhin
yesterday

add a comment |

-1

Some good info found here so decided to go with imperfect, but still good solution of creating invisible object in your code.

answered yesterday

Yuriy Semenikhin

334

add a comment |

-1

Some good info found here so decided to go with imperfect, but still good solution of creating invisible object in your code.

answered yesterday

Yuriy Semenikhin

334

add a comment |

-1

Some good info found here so decided to go with imperfect, but still good solution of creating invisible object in your code.

answered yesterday

Yuriy Semenikhin

334

Some good info found here so decided to go with imperfect, but still good solution of creating invisible object in your code.

answered yesterday

Yuriy Semenikhin

334

answered yesterday

Yuriy Semenikhin

334

answered yesterday

Yuriy Semenikhin

334

answered yesterday

Yuriy Semenikhin

334

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk