is it possible that move an element for the desktop only or mobile-only using xml or any other solution of it.
-
Maybe you can do this via Javascript. or Hide and show using CSS.– NitsSep 24, 2019 at 18:01
-
Should be easy in CSS based on the viewport size. Doing it otherwise would seem to require complicated and unreliable browser detection.– jiheisonSep 24, 2019 at 19:23
Add a comment
|
3 Answers
You can do by CSS and Javascript both, easy you can use Simple CSS.
#content {display: block;}
@media screen and (max-width: 768px) {
#content {display: none;}
}
answered Sep 25, 2019 at 10:43
-
The scenario is that I need the same div content for desktop and mobile just need to change the placement of that div. Also, I don't want to duplicate the code. Sep 26, 2019 at 5:38
-
Not possible in XML. Display the element two times using xml, one for mobile and another one for desktop where you want
Using @sangeeta's answer you can display like
.mobile-element {display: none;}
@media screen and (max-width: 768px) {
.desktop-element {display: none;}
}
answered Sep 26, 2019 at 6:58
You can do this by html and simple jQuery also:
<div class="custom" style="display:none;">Your html part </div>
$(document).ready(function(){
var width = $(window).width();
if(width < 768){ //for mobile only
$('.custom').show();
}
});
Here window.width function works as below:
If you want to display for Mobile: use window width "< 768". If you want to display for Tablet/desktop devices: use window width "> 767".
