2

I am using little HTML boxes on my work's website.

The thing is, we need to have HTML that will be shown to computer browsers, but we don't want this to show up on mobile devices because the HTML snippets are out of order when mobile devices pick them up.

Does anyone have any ideas?

  • It's a code snippet, as such I cannot use CSS as far as I know. It's kind of like wordpress or a builder site where you can put code into designated HTML boxes. The goal is to exclude some content from being seen by moible devices. –  Apr 22 '15 at 21:15
  • use a media query? under a certain width you can 'display:none' on those HTML blocks? – chrismillah Apr 22 '15 at 21:15
  • 2
    Use PHP to query the device-size and then echo HTML accordingly, or work with a CSS media query to restyle the existing HTML – SierraOscar Apr 22 '15 at 21:15
  • @SOofWXLS How do you query the device size with PHP? It runs on the server, not the client. You need JS on the client to query the device size and send it to PHP. – Barmar Apr 22 '15 at 21:24
  • @Barmar sorry, started writing one comment and merged into another... I use PHP to query `$_SERVER['HTTP_USER_AGENT']` and attempt to pick out if it's an iPhone etc. and then echo required HTML parts accordingly, extremely sloppy compared CSS media queries but a start if CSS is not available as OP suggests. – SierraOscar Apr 22 '15 at 21:28

3 Answers3

5

You will need to make use of media queries within your CSS to add display: none to the elements at a certain screen size

Example:

@media only screen AND (max-width: 736px) { // 736px is the iPhone 6+ max 
  .mobileHidden { // rename to whatever
    display: none; // doesn't display in the browser.
  }
}

You can change the max width to whatever you feel like and change the class name to whatever. Then you just add the class to the elements to be hidden and then its all done.

CSS Media Query Standard Sizes

Stewartside
  • 20,378
  • 12
  • 60
  • 81
  • Any and all CSS is showing up as text. The program that programs the website for us, does not recognize css and there is no way to attach a separate style sheet as far as I can tell. –  Apr 22 '15 at 21:25
  • 1
    if the device doesn't support css, then you'd have to do server-side detection and adjust whatever you're serving up. e.g. `if ($device == 'mobile') { send mobile version } else { send desktop version }` – Marc B Apr 22 '15 at 21:31
1

Since it seems like any PHP or JavaScript gets stripped out what I would look at next is seeing if you can leverage any of the existing styles on the site - particularly if the site is already responsive. Are there elements that get hidden or altered when reducing the browser window?

Inspect the CSS using your browsers developer tools (F12 in IE and FF (ctrl + shift + i in Chrome?)) and see if there are already any media queries in the CSS. It's a long shot but there may be something like what Stewartside suggests already there. If so you may be able to add one of the classes targeted within that query to a content wrapper div in your HTML box. Again using the class from Stewartside's example for clarity:

<div class="mobileHidden">Do what you want here</div>

Otherwise you may have to get in touch with the people that manage the CMS, explain your requirement and ask if they can add some styles to the CSS.

wunth
  • 634
  • 4
  • 13
  • I can try that, I will do so when I get to work tomorrow. I know for a fact that the template thingy uses div classes so I would assume that would work. –  Apr 23 '15 at 03:46
  • I take it these boxes are a kind of WYSIWYG which have a source view? I most likely don't need to tell you but just in case: ensure you are using the 'source' or 'html' view of the editor when you try this (as with the other suggestions here) otherwise you'll just get everything entered as text and not treated as markup or code. – wunth Apr 23 '15 at 04:39
  • The
    My Code Went Here
    thing did not work.     –  Apr 23 '15 at 13:24
  • It's always a fun challenge trying to get past the limitations of the system you're using. I badly wish I could see what it was you were dealing with. My last suggestion would be to figure out why the ordering changes and fix that - it would just be a styling thing but relatively complex if you aren't sure what to look for/how to look. However, it sounds like you can only add text and there is no source view option in which case you'll be stuck unless you can get access to the embedded CSS file(s) – wunth Apr 23 '15 at 21:23
  • I agree, it looks like I am stuck at the moment. Thank you all for all your help. It's not something I have to do. It was just to try to do it more efficiently. Just for reference, the website is called dealer.com –  Apr 24 '15 at 13:31
  • Apparently, there is a built in 1 button way to do it! –  Apr 24 '15 at 14:03
0

Look into media-queries in CSS. With it you can hide HTML elements on small devices for example.

Edit: you could add the styles directly on the HTML element. But that is dirty html...

Jonathan
  • 1,685
  • 2
  • 18
  • 25
  • CSS doesn't seem to be recognized by the html boxes I am using. It does recognize php though. –  Apr 22 '15 at 21:21
  • @LeonardTreman PHP runs on the server, the client box is irrelevant. – Barmar Apr 22 '15 at 21:23
  • With php you can't access much Information from client side. JavaScript would be the way to go here. The only way with php would be to check the browser type, but that's way to much for a code snippet. – Jonathan Apr 22 '15 at 21:26
  • Very cool, so PHP should work if I input it? XD Sorry, I have a degree in writing, I can do some netbeans applets, but at the moment PHP is still a bit out of my grasp. I have never successfully had a get or a getpost command to run. –  Apr 22 '15 at 21:27
  • 1
    PHP will get saved to a database and may run when serving the page if not stripped out. Possible answer here? http://stackoverflow.com/questions/13023157/use-media-query-inline-style – wunth Apr 22 '15 at 21:28
  • Unfortunately the server filtered it. I think it thought I was trying to hack in. –  Apr 22 '15 at 21:33
  • Are you sure JavaScript is filtered too? And php is not? Try to add a tag an see if it's still there after saving it. – Jonathan Apr 22 '15 at 21:38
  • I agree with Johnathan as to next step - maybe add an alert in that script tag to test quickly – wunth Apr 22 '15 at 21:39
  • Without the possibility to insert any CSS or JS I think you will not be able to accomplish the task without a deeper look in whatever system your are using there – Jonathan Apr 22 '15 at 21:47