3

I have a project and tried to make the box responsive when being viewed on smaller screens. I tried the @media queries using CSS but nothing worked. Here's the code of the element that I tried to turn into responsive element:

    <hr />

<h3 style="text-align: center;"><span style="text-decoration: underline;">Shortlink Generator:</span></h3>
<meta charset="utf-8">
<script charset="UTF-8" type="text/javascript">
window.SL_GENERATE = window.SL_GENERATE || {};
window.SL_GENERATE = {
  "ts_code": "acx",
  "width": "width:970px",
  "ui-template": "ui-resizable sl-green sl-ico-green",
  "Button": "Search",
  "whiteLabel": "0",
  "locale": "en",
  "subid": "sb_wp",
  "logo": "block",
  "radius": "1",
  "typeBoxDisplay": "block",
  "box": {
    "selected": "sl-selected",
    "textGenerate": "Generate",
    "textLong": "Long",
    "action": "http://www.goo.gl/",
    "target": "_blank",
    "textURL": "URL",
    "textLink": "Link",
    "textSubmit": "Submit",
    "textLength": "Length",
    "quote-text": "Generate Shortlink",
    "defLocation": "Kalimantan"
  },
}
</script>
<div class="resources-content">
<div id="wego-searchbox"></div>
</div>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,400,300,600">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="http://www.wan.travel/assets/app/datepicker.css">
<link rel="stylesheet" type="text/css" href="http://www.wan.travel/assets/app/searchbox.css">
<script charset="UTF-8" src="http://www.wan.travel/assets/wan/searchbox.js?body=1"></script>

<hr />

Anyone can help me to turn that code into a responsive element using CSS? Really appreciated and thanks very much ;)

williamshishui
  • 31
  • 2

1 Answers1

2

Without having any idea about what you've tried, the standard procedure for designing for mobile is to

  1. Add the viewport meta tag, which - at the most basic - is as follows

Optionally, if you want to permit mobile browser to zoom, you can expand the content attribute to content="width=device-width, initial-scale=1.0, user-scalable=yes"
EDIT: In today's world, mobile devices have more pixels than many older computers do. If you just base your media queries on pixels, then there's almost no way to differentiate between mobile and desktop. This tag tells the browser to scale the number of pixels that CSS thinks it has to a more reasonable amount using pixel density division magic.

  1. Add conditional media queries to your stylesheet. Something along the lines of

    @media (max-width: 600px) { #wego-searchbox { width: 100%; } }

normally suffices. Be aware that media queries will not override other CSS rules by default, but only if they are of greater specificity, or equal specificity, but the media query is placed after the first rule.

There is some useful answers over at this SO question with regards to what the general sizes for media queries should be, which I have found to be quite useful myself when doing responsive design.

kjhughes
  • 106,133
  • 27
  • 181
  • 240
chossenger
  • 613
  • 6
  • 15
  • Thank you very much for the code. I tried the same line of code you provided with max-width 500px before, but still didn't work. seems like it didn't match with the javascript and external css file from my original code above. Still trying some modifications though. – williamshishui Aug 02 '15 at 12:23
  • @williamshishui How are you testing responsiveness? Are you loading on a physical mobile device, resizing your window or using your browser's responsive testing mode? Also, what's your JS doing that you think it might not be working with? (Oh, by the way, I forgot to explain the `meta tag`) – chossenger Aug 03 '15 at 02:03
  • Have you tried adding body in front of your css? For example, inside media queries, body #abc{ color:red }. It somehow works for me because body slightly increases the specificity level so that css inside media queries can replace the original css. – Ken Kwok Aug 03 '15 at 02:21