Learning Responsive CSS Design – 1

Programmers don’t like GUI (Graphic User Interface) Design. Therefore, the CSS (Cascade Style Sheet) is not their thing. I always knew that there are viewing problems on smart phones/devices where the width of the screen (browser) is small and narrow. This blog was in a total mess before when viewing on my Samsung Gallery S3 smart phone.

That is because I chose a template that works best for desktops with wider screens. I didn’t have time and didn’t want to change it until I saw visiting statistics in Google Analytic. Apparently, the figure is significantly growing for visitors coming from smart phones/devices.

The wordpress or maybe the theme upgrade did improve a lot. Now, if you narrow your width of the browser to simulate the smart phones, then you can see the page isn’t quite bad but it is not perfect either and requires manual adjustments.

So, what is a responsive CSS? The word responsive means that, in my opinion, the CSS will be adjusted according to different situations (e.g. width of the screen). Have you noticed that the top-left corner of this page, there is a icon vertical toolbar. It looks fine when in wider width, however, in narrow width, this will collapse with the main content and make it a really ugly user experience. I decide to hide this when the screen width is small.

So the following is a quick starting point to responsive CSS.

<style>
.topleft { position:fixed;left:5px;top:15px; }
@media(max-width: 1100px) { .topleft { display:none } }
</style>

Basically, the above CSS defines the class topleft, and the second line will check if the width of current page (browser, screen) is larger than 1100 pixels, if not, then the topleft will be redefined as hidden.

To use it, simply include it like this…

<div class='topleft'>
  <!-- top-left icons placed here for https://helloacm.com -->
</div>

Now, you don’t even need to refresh the page, the CSS will be responsive immediately when the screen width falls below 1100px. For example, if you are viewing in iPad, and when you turn 90 degree from landscape to vertical, the CSS code will be responsive and the icons will be hidden.

–EOF (The Ultimate Computing & Technology Blog) —