hide div tag on mobile view only

Question

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 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

User · Answer

Well  I think that there are simple solutions than mentioned here on this page  first of all  let s make an example   You have 1 DIV and want to hide thas DIV on Desktop and show on Mobile  or vice versa   So  let s presume that the DIV position placed in the Head section and named as header div   The global code in your CSS file will be   for the same DIV     header div       display  none      media all and  max-width  768px    header div       display  block        So simple and no need to make 2 div s one for desktop and the other for mobile   Hope this helps   Thank you

User · Answer

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

User · Answer

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

User · Answer

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    lt div class  deskContent  gt Content for desktop lt  div gt   lt div class  phoneContent  gt Content for mobile lt  div gt

User · Answer

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    lt div class  deskContent  gt Content for desktop lt  div gt   lt div class  phoneContent  gt Content for mobile lt  div gt

User · Answer

i just switched positions and worked for me  showing only mobile     x000D   x000D   lt style gt  x000D    MobileContent   x000D   x000D       display  none  x000D    text-align center  x000D   x000D     x000D   x000D   media screen and  max-width  768px    x000D   x000D    MobileContent   x000D   x000D       display block  x000D   x000D     x000D   x000D    x000D   lt  style gt  x000D   lt div class  MobileContent  gt  Something  lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

try this   media handheld       title message   display  none

[css] hide div tag on mobile view only?

Examples related to css

Examples related to fluid-layout