Arranging divs with the same id in desktop and mobile

Question

I have a webpage that I am trying to optimize for desktop and mobile but have little experience in how to place divs in separate places on the screen that reference the same id. Any suggestions about best practices would be extremely helpful.

<input id='feature-filter' type='text' placeholder='Filter by name' />

For example, above I have an input named feature-filter that on desktop should be positioned in the menu bar called header on desktop. Note that there is no accompanying CSS to feature-filter.

#header {
 display: flex;
position: absolute;
align-items: center;
top: 0px;
width: 100%;
line-height: 50px;
height: 50px;
background: rgba(12, 12, 12, 0.8);
color: #eee;
font: 16px/20px 'Open Sans', sans-serif;
font-weight: 500;
text-align: center;
vertical-align: middle;
}


<div id='header'>
<button title = "ButtonA" id = "A"></button>
<button title = "ButtonB" id = "B"></button>
<button title = "ButtonC" id = "C"></button>
<input id='feature-filter' type='text' placeholder='Filter by name' />
</div>

In the mobile version, however, I would like to place this input in a legend that is at the bottom of the page. In my javascript, there is an event listener that pulls data from feature-filter.

#legend { z-index: 101010; padding: 5px; position: fixed; text-align: center;
  color: #fff; bottom: 0px; width: 300px; background: #181818; opacity: 0.92;
  font-family: 'Open Sans', sans-serif; left: 0; right: 0; font-weight: 300}

<div id='legend'>
 <input id='feature-filter' type='text' placeholder='Filter by name' />
</div>

Is it possible to reference the same DOM id in javascript AND place feature-filter in two separate places in the html - one for the mobile and one for the desktop version ?

What is the best approach to this problem? Using CSS classes would still require having two separate inputs with the same id in the html

Any basic explanation or suggestions would be appreciated.

You cannot use the same id for two different elements in html, id is designed to be a unique identifier that has the highest selector value for css. I would use @media to create different rule sets for mobile and desktop. If you use id for two elements; if it doesn't automatically throw an error and stop function will introduce unintended behavior into your program or in this case webpage. Here is a link for [@media](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp) — Matthew Lagerwey, Feb 16 '18 at 22:29

Dan Sorensen · Accepted Answer · 2018-02-17T07:40:33.717

It would be best to use the same HTML regardless of screen type. I would use a div tag, and not misuse the legend tag. This simplifies the JavaScript and improves accessibility. However, you may style it differently depending on screen size. You may even disable / enable certain elements to adapt to mobile.

I would not try to use two different HTML elements with the same ID. Duplicated elements should use a class name not an ID (which is intended to be unique). Either use the same HTML and style differently, or use two entirely different HTML elements (with different IDs) and use the CSS to disable one and test in JavaScript which one should be used.

To approach styling differently for different devices, the recommended practice is to use a style sheet that applies different rules based on screen size. See this StackOverflow question for how to target different sized screens with your CSS style sheet.

You may also reference existing styling frameworks such as Bootstrap's responsive grid as an example or a solution to see how to style differently for different sized screens.

score 0 · Answer 2 · answered Feb 16 '18 at 21:28

I'd recommend using CSS to properly position each element depending on the amount of pixels available. If mobile than do this, if desktop than do this. Its a matter of visuals right? Why not use CSS and tell it how you want your page to look. CSS Info

Or download Bootstrap and customize it to your CSS liking.

Arranging divs with the same id in desktop and mobile

2 Answers2