0

Is it possible to adjust the HTML structure while moving from Desktop view to Mobile view? For example,

<div class="container1">
    <div class="dropdown1">Some HTML here</div>
</div>
<div class="container2">
    <div class="dropdown2">Some HTML here</div>
</div>

I want to render both the dropdowns inside "container1" when using Mobile view. Is it possible?

Nakul Pritam
  • 76
  • 6
  • 3
    It is possible only trough javascript. But I don't think this is what you really want to achieve. Try thinking of something else, and try using CSS media queries for that. They are way faster and less consuming than javascript. – Phiter Dec 26 '17 at 15:36
  • The code I am trying to work on is part of an existing project so cannot change the structure. The change is only required in Mobile view. Consider the above code for desktop view. That should remain unchanged. – Nakul Pritam Dec 26 '17 at 15:37
  • What exactly do you want to achieve, visually speaking? – Phiter Dec 26 '17 at 15:45
  • You would need to provide a lot more details, including the parent element, the relevant parts of the existing CSS, how it looks on the desktop, and how you would like it to look like on mobile... – jcaron Dec 26 '17 at 15:47
  • On the desktop view there is a left pane and a right pane. The left pane has a list and the right pane has a dropdown. When switching to mobile view the expectation is to have both the dropdown and the list inline on top of the page. Since the dropdown is in a completely different container it is not possible to simply make them show up inline. – Nakul Pritam Dec 26 '17 at 15:47
  • It sure as hell is. Give me a second – Phiter Dec 26 '17 at 15:48
  • @Phiter is correct, use `@media` queries. Just google it and you'll see a lot of examples. You can easily hide/show selected elements according to the window size/resolution. – Gene Parcellano Dec 26 '17 at 18:22

2 Answers2

-1

You can detect if your site is in a mobile, this answer can help you. Then, with Javascript you have to change the element parent, like in this example.

Hope this can help you.

Sam Huaman
  • 7
  • 1
  • Is there any way in which CSS can be used to accomplish this? – Nakul Pritam Dec 26 '17 at 15:41
  • For example, with CSS3 you can change the styles if the screen size is < 800px, here's is my example: //On screen resize @media screen and (max-width: 800px) { .gt-global-container { margin: 0; } } But you can't move the element to another parent. – Sam Huaman Dec 26 '17 at 20:51
-1

The only solution to your problem is to duplicate dropdown2 within container1 and hide it with media query on desktop viewport. Then show it only on smaller devices and hide the container2.

El Danielo
  • 710
  • 8
  • 17