How to hide a column under a break-point tablet with Bulma?
Given the following html :
<div class="columns">
<div class="column">Always here</div>
<div class="column">Hidden on mobile</div>
<div class="column">Always here</div>
</div>
How to make that the middle column get hidden on mobile ?
Note: I found no help on this "hide" feature on the official doc.
css bulma
asked Aug 14 '18 at 18:49
Hugo LOPEZHugo LOPEZ
18311
add a comment |
Given the following html :
<div class="columns">
<div class="column">Always here</div>
<div class="column">Hidden on mobile</div>
<div class="column">Always here</div>
</div>
How to make that the middle column get hidden on mobile ?
Note: I found no help on this "hide" feature on the official doc.
css bulma
asked Aug 14 '18 at 18:49
Hugo LOPEZHugo LOPEZ
18311
add a comment |
Given the following html :
<div class="columns">
<div class="column">Always here</div>
<div class="column">Hidden on mobile</div>
<div class="column">Always here</div>
</div>
How to make that the middle column get hidden on mobile ?
Note: I found no help on this "hide" feature on the official doc.
css bulma
asked Aug 14 '18 at 18:49
Hugo LOPEZHugo LOPEZ
18311
Given the following html :
<div class="columns">
<div class="column">Always here</div>
<div class="column">Hidden on mobile</div>
<div class="column">Always here</div>
</div>
How to make that the middle column get hidden on mobile ?
Note: I found no help on this "hide" feature on the official doc.
css bulma
css bulma
asked Aug 14 '18 at 18:49
Hugo LOPEZHugo LOPEZ
18311
asked Aug 14 '18 at 18:49
Hugo LOPEZHugo LOPEZ
18311
asked Aug 14 '18 at 18:49
Hugo LOPEZHugo LOPEZ
18311
asked Aug 14 '18 at 18:49
Hugo LOPEZHugo LOPEZ
18311
asked Aug 14 '18 at 18:49
Hugo LOPEZHugo LOPEZ
18311
18311
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
is-hidden-mobile hides on mobile and is-hidden-touch hides on both mobile and tablet. The hide feature is on the official documentation under responsive helpers:
https://bulma.io/documentation/modifiers/responsive-helpers/#hide
edited Nov 13 '18 at 12:13
kvantour
8,72831330
answered Nov 13 '18 at 11:50
Mattias AxelssonMattias Axelsson
8615
add a comment |
is-hidden-mobile can do the trick
<div class="columns">
<div class="column">Always here</div>
<div class="column is-hidden-mobile">Hidden on mobile</div>
<div class="column">Always here</div>
</div>
answered Nov 12 '18 at 18:03
天才小飞猫天才小飞猫
567419
add a comment |
You will have to use custom css for that.
.mobile-hidden
display: none;
@media (min-width: 769px)
.mobile-hidden
display: block;
<div class="columns">
<div class="column">Always here</div>
<div class="column mobile-hidden">Hidden on mobile</div>
<div class="column">Always here</div>
</div>answered Aug 14 '18 at 19:30
Michał DrabikMichał Drabik
30928
add a comment |
add this css in your file
@media only screen and (max-width: 767px)
.columns .column:nth-child(2) display: none;
answered Aug 14 '18 at 19:29
p_ketanp_ketan
2623
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51848020%2fhow-to-hide-a-column-under-a-break-point-tablet-with-bulma%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
is-hidden-mobile hides on mobile and is-hidden-touch hides on both mobile and tablet. The hide feature is on the official documentation under responsive helpers:
https://bulma.io/documentation/modifiers/responsive-helpers/#hide
edited Nov 13 '18 at 12:13
kvantour
8,72831330
answered Nov 13 '18 at 11:50
Mattias AxelssonMattias Axelsson
8615
add a comment |
is-hidden-mobile hides on mobile and is-hidden-touch hides on both mobile and tablet. The hide feature is on the official documentation under responsive helpers:
https://bulma.io/documentation/modifiers/responsive-helpers/#hide
edited Nov 13 '18 at 12:13
kvantour
8,72831330
answered Nov 13 '18 at 11:50
Mattias AxelssonMattias Axelsson
8615
add a comment |
is-hidden-mobile hides on mobile and is-hidden-touch hides on both mobile and tablet. The hide feature is on the official documentation under responsive helpers:
https://bulma.io/documentation/modifiers/responsive-helpers/#hide
edited Nov 13 '18 at 12:13
kvantour
8,72831330
answered Nov 13 '18 at 11:50
Mattias AxelssonMattias Axelsson
8615
is-hidden-mobile hides on mobile and is-hidden-touch hides on both mobile and tablet. The hide feature is on the official documentation under responsive helpers:
https://bulma.io/documentation/modifiers/responsive-helpers/#hide
edited Nov 13 '18 at 12:13
kvantour
8,72831330
answered Nov 13 '18 at 11:50
Mattias AxelssonMattias Axelsson
8615
edited Nov 13 '18 at 12:13
kvantour
8,72831330
edited Nov 13 '18 at 12:13
kvantour
8,72831330
edited Nov 13 '18 at 12:13
kvantour
8,72831330
8,72831330
answered Nov 13 '18 at 11:50
Mattias AxelssonMattias Axelsson
8615
answered Nov 13 '18 at 11:50
Mattias AxelssonMattias Axelsson
8615
answered Nov 13 '18 at 11:50
Mattias AxelssonMattias Axelsson
8615
8615
add a comment |
add a comment |
is-hidden-mobile can do the trick
<div class="columns">
<div class="column">Always here</div>
<div class="column is-hidden-mobile">Hidden on mobile</div>
<div class="column">Always here</div>
</div>
answered Nov 12 '18 at 18:03
天才小飞猫天才小飞猫
567419
add a comment |
is-hidden-mobile can do the trick
<div class="columns">
<div class="column">Always here</div>
<div class="column is-hidden-mobile">Hidden on mobile</div>
<div class="column">Always here</div>
</div>
answered Nov 12 '18 at 18:03
天才小飞猫天才小飞猫
567419
add a comment |
is-hidden-mobile can do the trick
<div class="columns">
<div class="column">Always here</div>
<div class="column is-hidden-mobile">Hidden on mobile</div>
<div class="column">Always here</div>
</div>
answered Nov 12 '18 at 18:03
天才小飞猫天才小飞猫
567419
is-hidden-mobile can do the trick
<div class="columns">
<div class="column">Always here</div>
<div class="column is-hidden-mobile">Hidden on mobile</div>
<div class="column">Always here</div>
</div>
answered Nov 12 '18 at 18:03
天才小飞猫天才小飞猫
567419
answered Nov 12 '18 at 18:03
天才小飞猫天才小飞猫
567419
answered Nov 12 '18 at 18:03
天才小飞猫天才小飞猫
567419
answered Nov 12 '18 at 18:03
天才小飞猫天才小飞猫
567419
567419
add a comment |
add a comment |
You will have to use custom css for that.
.mobile-hidden
display: none;
@media (min-width: 769px)
.mobile-hidden
display: block;
<div class="columns">
<div class="column">Always here</div>
<div class="column mobile-hidden">Hidden on mobile</div>
<div class="column">Always here</div>
</div>answered Aug 14 '18 at 19:30
Michał DrabikMichał Drabik
30928
add a comment |
You will have to use custom css for that.
.mobile-hidden
display: none;
@media (min-width: 769px)
.mobile-hidden
display: block;
<div class="columns">
<div class="column">Always here</div>
<div class="column mobile-hidden">Hidden on mobile</div>
<div class="column">Always here</div>
</div>answered Aug 14 '18 at 19:30
Michał DrabikMichał Drabik
30928
add a comment |
You will have to use custom css for that.
.mobile-hidden
display: none;
@media (min-width: 769px)
.mobile-hidden
display: block;
<div class="columns">
<div class="column">Always here</div>
<div class="column mobile-hidden">Hidden on mobile</div>
<div class="column">Always here</div>
</div>answered Aug 14 '18 at 19:30
Michał DrabikMichał Drabik
30928
You will have to use custom css for that.
.mobile-hidden
display: none;
@media (min-width: 769px)
.mobile-hidden
display: block;
<div class="columns">
<div class="column">Always here</div>
<div class="column mobile-hidden">Hidden on mobile</div>
<div class="column">Always here</div>
</div>.mobile-hidden
display: none;
@media (min-width: 769px)
.mobile-hidden
display: block;
<div class="columns">
<div class="column">Always here</div>
<div class="column mobile-hidden">Hidden on mobile</div>
<div class="column">Always here</div>
</div>.mobile-hidden
display: none;
@media (min-width: 769px)
.mobile-hidden
display: block;
<div class="columns">
<div class="column">Always here</div>
<div class="column mobile-hidden">Hidden on mobile</div>
<div class="column">Always here</div>
</div>answered Aug 14 '18 at 19:30
Michał DrabikMichał Drabik
30928
answered Aug 14 '18 at 19:30
Michał DrabikMichał Drabik
30928
answered Aug 14 '18 at 19:30
Michał DrabikMichał Drabik
30928
answered Aug 14 '18 at 19:30
Michał DrabikMichał Drabik
30928
30928
add a comment |
add a comment |
add this css in your file
@media only screen and (max-width: 767px)
.columns .column:nth-child(2) display: none;
answered Aug 14 '18 at 19:29
p_ketanp_ketan
2623
add a comment |
add this css in your file
@media only screen and (max-width: 767px)
.columns .column:nth-child(2) display: none;
answered Aug 14 '18 at 19:29
p_ketanp_ketan
2623
add a comment |
add this css in your file
@media only screen and (max-width: 767px)
.columns .column:nth-child(2) display: none;
answered Aug 14 '18 at 19:29
p_ketanp_ketan
2623
add this css in your file
@media only screen and (max-width: 767px)
.columns .column:nth-child(2) display: none;
answered Aug 14 '18 at 19:29
p_ketanp_ketan
2623
answered Aug 14 '18 at 19:29
p_ketanp_ketan
2623
answered Aug 14 '18 at 19:29
p_ketanp_ketan
2623
answered Aug 14 '18 at 19:29
p_ketanp_ketan
2623
2623
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51848020%2fhow-to-hide-a-column-under-a-break-point-tablet-with-bulma%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
