Jump to content

.London Domains - £4
Photo

Remove/add HTML based off screen-width - not just hiding them.

html viewport css screen width

  • Please log in to reply
4 replies to this topic

#1 dbethig

dbethig
  • Member
  • Newbie
  • 2 posts

Posted 11 May 2017 - 09:25

Hi there,

 

Relatively new to front-end design, I know how to hide/show elements via media-queries in CSS. But looking at other sites I came across this one: http://www.flooringsupplies.co.uk/ and elements such as the <header> completely change their structure based of what seems to be the device-width.

 

My question is how can this be done?

 

I am using Joomla for my website and would want to load one module for smaller screens (for a menu) and different one for anything bigger. I don't want to just hide the relevant menu.

Does it have to be done with jQuery or another server end language?

 

Sorry if it's an obvious solution, a very difficult one, or isn't even necessary for me.

 

The website I am working on is http://www.flooringsales.co.uk/, it is very simple and not the best I know.

We are aiming to keep the current mega menu module for desktop, then have an acordian side menu module for tablet/mobile.

 

 

 

Thank you

Dan


  • 0

#2 CraigP

CraigP
  • Supporter+
  • Mike's BFF
  • 2,320 posts

Posted 12 May 2017 - 09:35

Morning, 

 

You can turn off items based using display:none in your CSS.

but it's going to be better to adjust design in the CSS rather than have duplicate content or whatever.


  • 0

Push24 Creative - it's just who we are and what we do!
Get in Touch - craig@Push24Creative.co.uk

Follow Me - @craigpettit12 - @Push24Creative
+1 to those who help


#3 dbethig

dbethig
  • Member
  • Newbie
  • 2 posts

Posted 12 May 2017 - 14:16

 

 

 I don't want to just hide the relevant menu

 

Like I said, I don't want to just hide it with CSS.


  • 0

#4 CodingWithMike

CodingWithMike
  • Member
  • Newbie
  • 1 posts

Posted 29 August 2017 - 19:45

Hi Dan,

 

I'm not sure if you managed to fix this or not as it is an old post but if you want to change the structure of your HTML dependent on the size of the browser/device and you don't want to use media queries, you would probably need to use jQuery or JavaScript.

 

I'm afraid doing this via a server side programming language would be impossible as the server has no way of knowing the size of the user's browser or device so this has to be done client side.

 

This forum post explains how you could execute different code blocks dependent on the window size but this might not help you if you want the device size rather than browser window.

 

https://stackoverflo...-on-screen-size

 

Also there is something called the jQuery Mobile framework - I've never used it before but I think it does help you to do something similar.

https://jquerymobile.com/

 

 

Hopefully this helps.


  • 2

#5 bwclovis

bwclovis
  • Member
  • Newbie
  • 1 posts

Posted 13 December 2017 - 14:51

Older post but, the example your provided has 2 menus. One that's hidden on desktop and then shown on mobile while the desktop navigation is hidden. 

 

The only issue with removing it (which can be done as  shown below), would be getting it back, so you would have to save it somehow, or render it with backend/frontend code, which would be an issue with page performance, frankly a nightmare to do but....

if (matchMedia('only screen and (max-width: 480px)').matches) {
   componetName.remove();
} else {
    component.parent.add(compoinentName)
}

  • 0





Also tagged with one or more of these keywords: html, viewport, css, screen width

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users