Question 261463 in Html Question posted in
Some basic documentation can be found here.

Html – How to Render a Specific <div> Element in Desktop View Instead of Entire Page?

<body>
<header> ... </header>
<div class="desktop"> Hello World! </div> 
<footer> ... </footer>
</body>

I used to always render the desktop view using the meta tag, but I need the header and footer responsive and need the div element with class ‘desktop’ to be rendered in desktop view.

Is it possible without CSS ?

Tags:

2

Answers


  1. 0

    From my knowledge this is not possible with native React, but you might want to check out the react-responsive package.

    React-responsive allows you to conditionally render components based on screen width.

    Login or Signup to reply.
  2. 0

    Might be possible without CSS, but with Media Queries, this could be as simple as hiding the <header> and <footer> elements when the devices width is bigger than, let’s say, 800px. This is a very simple thing to do in CSS, and you should be able to learn it quickly.

    Something like this (play around with your viewport a little to see the effects):

    @media all and (min-width: 600px) {
  header {
    display: none;
  }
  footer {
    display: none;
  }
}
        <!DOCTYPE html>
    <html>
      <head>
      </head>
      <body>
        <header> ... </header>
        <div class="desktop"> Hello World! </div> 
        <footer> ... </footer>
      </body>
    </html>

    As you can see, <header> and <footer> get shown only when the device/ viewport width gets under 600px, and are hidden when the width is above that. You would probably exchange (min-width: 600px) for a value that actually targets the desktop pixel width you aim for.

    If your development environment does not allow or makes it unpossible to use CSS, then you should fix that first, since most modern applications & websites simply require some CSS – like this problem here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search