hide div tag on mobile view only?

show div only on mobile
hide div on mobile bootstrap
display only on mobile
hide text on mobile view
hide image on mobile css
hide div if mobile css
hide div on mobile bootstrap 4
hide div in mobile view bootstrap 4

I'm creating a fluid layout for a site. I'm trying to hide the contents of a <div> or the whole <div> itself in the mobile view, but not the tablet and desktop view.

Here's what I've got so far...

#title_message {
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}

I have the display set to 'none' for the mobile layout and set as block on the tablet/desktop layouts... Is there an easier way to do that, or is that it?

You will need two things. The first is @media screen to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden attribute. Once the browser/screen reaches 600pixels then #title_message will become hidden.

@media screen and (max-width: 600px) {
  #title_message {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

EDIT: if you are using another CSS for mobile then just add the visibility: hidden; to #title_message. Hope this helps you!

Show and Hide Different Content On Mobile Devices & Desktops, This is the content that will display on MOBILE DEVICES. </div> between the two opening and closing div tags (like photos, headings, youtube videos, galleries, etc…) on desktops and the Mobile content only appear on mobile devices. Then view your page on your Desktop and then on your phone… I'm creating a fluid layout for a site. I'm trying to hide the contents of a &lt;div&gt; or the whole &lt;div&gt; itself in the mobile view, but not the tablet and desktop view. Here's what I've g

Set the display property to none as the default, then use a media query to apply the desired styles to the div when the browser reaches a certain width. Replace 768px in the media query with whatever the minimum px value is where your div should be visible.

#title_message {
    display: none;
}

@media screen and (min-width: 768px) {
    #title_message {
        clear: both;
        display: block;
        float: left;
        margin: 10px auto 5px 20px;
        width: 28%;
    }
}

Show & hide specific content on mobile devices, TEXT OR IMAGE FOR MOBILE HERE </div>. This div will declare that this copy will respond only when the class is triggered. By adding the code below, the  What code can I use to make a particular div show only if on a mobile width? I have a 100% width full div at the top of my screen, would like it to only show when the device is specified as a mobile width.

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { #title_message { display: none; }}

This would be for a responsive design with a single page for an iphone screen specifically. Are you actually routing to a different mobile page?

Mobile Device Trick, Viewing 15 posts - 1 through 15 (of 18 total) Use media queries to hide content on screens with smaller resolutions, There are much easier ways to do that without using classes like 'screen-only' and 'mobile-only'. everything with CSS – no need to give every element on a page a different class name. This is the content that will display on DESKTOPS. </div>. <div id=”content-mobile”>. This is the content that will display on MOBILE DEVICES. </div>. Just by looking at that you should be able to tell that the top block will be for the DESKTOP content and the bottom block will be for MOBILE content.

You can be guided by this example. On your css file:

.deskContent {
    background-image: url(../img/big-pic.png);
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-size: contain; 
}

.phoneContent {
    background-image: url(../img/small-pic.png);
    width: 100%;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
}

@media all and (max-width: 959px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

On your html file:

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>

How to Display Site Content Only Your Mobile Viewers Can See, Learn how you can show or hide certain text or images for mobile devices. “​year of mobile” will be, but I can tell you mobile traffic to your site will only This div will declare that this copy will respond only when the class is  is there any class or technique available in bootstrap by which i can hide DIV for tablet or mobile without using media query. please come with bootstrap class name which hide DIV for tablet or mob

The solution given didn't work for me on the desktop, it just showed both divs, although the mobile only showed the mobile div. So I did a little search and found the min-width option. I updated my code to the following and it works fine now :)

CSS:

    @media all and (min-width: 480px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

HTML:

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>

Display property · Bootstrap, We purposely support only a subset of all possible values for display . For faster mobile-friendly development, use responsive display classes for different versions of the same site, instead hide element responsively for each screen size​. There are a few reasons you may want to hide a Div in a website design. You may want to create a drop down type menu or a box that will show more information when you click a link. Another reason would be for SEO purposes. In theory hiding information in a Div is not against Google’s rules.

How to Hide Images on a Website When It is Viewed on a Mobile , Making Pictures Disappear on Mobile Devices and Small Screens you should read How to Make a Mobile-Friendly Website: Responsive Design in The " display: none; " rule not only hides the element, but also removes it  Login Form Signup Form Checkout Form Contact Form Social Login Form Register Form Form with Icons Newsletter Stacked Form Responsive Form Popup Form Inline Form Clear Input Field Hide Number Arrows Copy Text to Clipboard Animated Search Search Button Fullscreen Search Input Field in Navbar Login Form in Navbar Custom Checkbox/Radio Custom Select Toggle Switch Check Checkbox Detect Caps Lock Trigger Button on Enter Password Validation Toggle Password Visibility Multiple Step Form Autocomplete

Hide/Show Content on Mobile/Desktop, I want to hide the content when viewed on mobile and show something. Everything i read requires adding/modifying the CSS/HTML but i wouldn't the class hidden-mobile to that. and any element that you only want to display on to do is add class to the opening tag. <div class="hidden-mobile"> </div> Hide and show a div with CSS. The first method, involves using only CSS. We will use the CSS pseudo-class :hover. The idea is that we want to hide the div once the user has moved their mouse over it, and display something else instead. This effect is commonly used when you have a subscribe button.

How to hide DIV for tablet or mobile using bootstrap class, is there any class or technique available in bootstrap by which i can hide DIV for tablet or mobile without using media query. please come with  Override The Default Display Value. As mentioned, every element has a default display value. However, you can override this. Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.

Comments
  • That fixed it. Thanks Matt!
  • I'm glad that worked! Thanks for marking the answer as correct.
  • When you come to StackOverflow... there's always going to be a solution to your query..... Except, most of the time I seem to come across slight alternatives. ...This answer is exactly what I was looking for! ...Thank you Dude. (p.s. used for a custom mobile menu on my site amazewebs.com ...mobile menu will show when width<768px
  • It's working for me. Have to display only mobile pages@media screen and (min-width: 700px) { .mobile-title { visibility: hidden; } } div.mobile-title h1 { text-align: center !important; font-size: 20px; font-weight: bold; padding: 5px; }
  • That's the wrong way round. The div won't display on browsers that don't support media queries.
  • Of course they are the solution, but you're doing this the wrong way round. Unless your website is mostly used for mobile, you never build your css from the bottom up.
  • I don't consider mobile and desktop as separate websites. It is much easier to scale a project up as the browser gets bigger than it is to trim down as the browser gets smaller. In this case, KT is building responsive site, regardless of if it is "mostly" used for mobile or simply optimized for all browsers. A mobile first approach saves the mobile browsers from having to load additional CSS styles that never are actually applied. This approach is not the wrong way, it's simply not the way you suggest building your css.
  • @MMM That's actually how mobile-first design is: from the bottom up.
  • @MMM Oops, I thought it was 2015. Anyway I'm just against "you never build your css from the bottom up"
  • That didn't work. It wiped out all the CSS for the mobile layout.
  • Can you provide a small sample of your css then? I'm not seeing the whole picture here but that shouldn't have wiped out your layout
  • This work better, because visibility: hidden only hide the element but still there (the place remains). Instead display: none; really hide it and completely removing it.