Responsive CSS

Please look at rkassoc.org/dev

This is the VERY BEGINNING of a project to develop a responsive web tool.

Note that if you resize the width by narrowing, when it reaches a certain point, the item headings are on a different row than the input element.

I understand why this is, because I did text-align: right on those two divs. I did that because I want that look of tag: values  as it appears on a wider screen.

I am a novice to responsive design, I am moderately knowledgeable of css.

What I would like is the tags to right align as indicated but then drop the right alignment after the screen size is less than some value; that is, work on a cell phone.

What is the best way to do this?

I attach the css (which I downloaded from W3 Schools so I could see it) & my html file.

Thanks
index.htm
W3.css
Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
I am a novice to responsive design, I am moderately knowledgeable of css.
Given this is a start of a project then my advice would be to download Bootstrap and start with that. It does most of the heavy lifting for you and to get up and running you basically need to include the .CSS file.

Their website docs are quite comprehensive and the web is full of samples to get you going in the right direction.

For a slightly different take on the same topic there is also Foundation from Zurb - same concept slightly different implementation.

If you want to hit the ground running on the basics of responsive design take some time to meander through either of the above .CSS files and play around with their styles.
Julian HansenCommented:
Here is a simple boiler plate sample for Bootstrap - works out of the box wherever you put it
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
/* CUSTOM STYLES */
</style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-lg-6 col-lg-offset-4"><h1>Hello World</h1></div>
  </div>
</div>

<script src="http://code.jquery.com/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
// CUSTOM SCRIPT
</script>

</body>
</html>

Open in new window

Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
I'm in the process of taking a class in Bootstrap on Lynda.com. The problem I see is it's too complex, there are a MILLION classes to either memorize or look up every time you need to do something; you have to specify 5 or s6 classes for each div to handle small, medium, large, extra small, etc.

I'm sure it's very good but seems overly complex for this project.

Like in your simple example class="col-lg-6 col-lg-offset-4", what does col-lg-6 mean, what does col-lg-offset-4 mean? etc.

Is there no way I can modify the css I attached to do what I want?
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Julian HansenCommented:
col-lg-offset-4 means create a margin on the left 1/3 of the screen. It is used when you don't use all col's in a row and need to space theme out. The style is effecitvely margin-left: 33.333333%

It does seem a bit overwhelming at first but that is the nature of responsive design - trying to be everything to everyone - however, I will say that once you start working with it and get on top of the grid system the  rest follows pretty naturally.

Anyhow, in my view a good place to start to learn about responsiveness even if you don't end up using the framework.
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
I consider the question NOT answered, you have wanted to push something else. not solve my problem as is.

I am requesting the question be closed, I will open it again with different details.
Julian HansenCommented:
I am sorry you feel that way Richard, my intention was not to push you anywhere but to assist you based on my own personal experience in this field. By better understanding the principles - it is easier to move forward and as a lot of effort has been put into the responsive frameworks out there it is great way to short cut the process.

To answer your question - what you are looking for is media queries.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
A media query allows you to specify a style override for a particular screen configuration. For instance in your case where the wrap happens at a width of 600px you could do something like this (in your style sheet)
@media(max-width: 600px) {
 .your-div-class{
    text-align: left;
 }
}

Open in new window

Note: in your code you have declared an inline style to text-align: right - so you will need to remove that and place it in your styles - before the media query above.

What the media query says (in this case) - if the screen width is up to a max of 600px wide then apply the contained style - which would then effectively override the default you defined before the media query aligning the text left.

Please feel free to post back if you would like further information on how media queries worked - your question asked for the best way to do this - that is specifically what media queries are for.
Prasadh BaapaatWeb Designer & DeveloperCommented:
I am not intruding here nor discounting what expert Julian tried to explain...

I looked at your HTML+CSS and think you can move further just fine with what you have started with.

in your page, you have 2 rows with a text + drop-down in each.

you did good job in the way you have placed them... looks fine on a desktop.

now you want the text to be LEFT ALIGNED when the view area is small... its a very simple requirement.

so in Plain English we have to tell CSS THAT WHEN THE VIEWPORT IS BELOW 768px in width... please align the text to LEFT..

simple enough... create a class with text align to right AND MAKE SURE it applies ONLY WHEN Screen is smaller that a GIVEN VALUE.

here is what I will do if I was in your place:

1) first I will REMOVE the inline style of text-align given to the text divs

2) add a NEW CLASS which I can manipulate to have 2 text aligns... 1 for desktop size and 1 for mobile size.

3) add the appropriate CSS for diff alignments and test how it looks.


just add this code after all lines in your css:
/* alignment for all sizes ABOVE 768 px in width */
.lable-align {
	text-align: right;
}
/* CSS applies ONLY when screen is Smaller that 768*/
@media (max-width:768px){
.lable-align {
	text-align: left;
}
}

Open in new window


Your two divs HTML should be like below with the new class added:
<div class="w3-quarter lable-align">
  <h3>Country&nbsp;</h3>
</div>

<!-- some other HTML code here -->

<div class="w3-quarter lable-align">
  <h3>State</h3>
</div>

Open in new window


PS: there can be more improvement in the look for mobile, but I will tell if you feel ok to go ahead with my further suggestions.

As mentioned in earlier by Julian using bootstrap or any other ready made framework is indeed good if you consider the overall easiness in respect to a PROJECT. it has lot of things there, waiting for you to use if you know how to use them...

after your Lynda.com class, I am sure you will feel more in TUNE and confidant.

don't worry, there was a time when I understood absolutely nothing about what this responsive web is about :)

best of luck for new learning's :)

thanks,
Prasadh

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Prasadh Baapaat, that works perfectly.

To you both, I want to learn bootstrap, I just have a tight deadline I need to meet, I got that basic CSS from W3 Schools, which they claim will perfectly handle responsiveness. I have been pleased with their info & answers for years & I thought it looked simpler than bootstrap.
Prasadh BaapaatWeb Designer & DeveloperCommented:
Julian deserved more points here...
anyways good to read that you are satisfied with the outcome.
thanks,
Prasadh
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
I gave you the majority of the points because your solution dealt directly with the problem at hand & solved it quickly.

I appreciate the power of Bootstrap; I began that Lynda.com course two months ago, long before this project began.

Also, I am sure that Julian is very knowledgeable but I feel a fast, direct solution is worth more.
Prasadh BaapaatWeb Designer & DeveloperCommented:
thanks & you are always welcome :)
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
To Prasadh Baapaat

I suspect I will get into more issues with this "down the road", so keep an eye out for other CSS  & responsive related questions. Could be as early as tomorrow as I get farther into this.

Richard
Prasadh BaapaatWeb Designer & DeveloperCommented:
no problems... I will answer when I can and other experts will answer when they can :)
Julian HansenCommented:
@Richard,
At EE we are encouraged to assist authors beyond the question asked - there hundreds of questions where an author has asked one thing only to be advised to go in a different direction - for which they have gratefully awarded points. I have been involved in many questions where I have given a direct answer and lost out to another post that has pointed out a different direction the author can take. It takes a fair amount of time to construct these answers - so they are not offered frivolously and they are constructed only on the information provided by the author.  

I do understand where you are coming from - you wanted an answer and you received what you perceived as tangential deviation. From my side I have to look at the question in the context of what I feel best suits the askers needs. It was really my intention to assist - and I stand by my earlier recommendation - that to troll through the bootstrap CSS is a great way to shortcut understanding of responsive design.

When you made it clear you wanted an answer I gave you one - which was (with the exception of some minor detail) exactly the solution offered by Prasadh in his follow up post.

I am sorry that you feel that you did not get the response you wanted from me - I hope that this serves to explain where I was coming from.

JulianH
Prasadh BaapaatWeb Designer & DeveloperCommented:
I too want to clarify something here... I just chanced on the question and I read that Richard was closing the question, that's where i felt I should try to explain in more simpler words and give the solution directly.

when I finished typing my answer and hit submit, I saw Julian's last answer... it was almost similar to mine ... only missing direct code...  I would not have posted my answer if I had read Julian's last answer.
Prasadh BaapaatWeb Designer & DeveloperCommented:
I avoid to answer when someone is already answering as it makes no sense for me to join in and start answering if someone is already helping. here it just happened that I wanted someone seeking a solution not to leave feeling he is not getting a solution.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I 2nd going with Bootstrap.  It may seem more complex because there are more options.  But if you only start out using the css grid portion, you will see it is similar http://getbootstrap.com/css/ 
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Open in new window

vs
<div class="w3-container w3-orange">
  <h1>W3Schools Demo</h1> 
  <p>Resize this responsive page!</p> 
</div>

<div class="w3-row-padding">

<div class="w3-third">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="w3-third">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p> 
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 12 million inhabitants.</p>
</div>

<div class="w3-third">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
  <p>It is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</div>

</div>

Open in new window

Since Bootstrap is in it's 3rd version and the 4th is about ready to be released, they have had plenty of time to keep things up to date and work out the kinks.  After working with many other libraries, the two best are bootstrap and http://foundation.zurb.com. Lilke VHS and Beta, both are good, actually one has more good info on their site, but the other is more widely used  http://demos.telerik.com/kendo-ui/bootstrap/  http://themeforest.net/tags/bootstrap

After my own Experience, I also highly recommend going to bootstrap because many of the issues you will run into are already taken care of.  As long as you follow columns inside of rows inside of a container, it just works.

>This is the VERY BEGINNING of a project to develop a responsive web tool.
I think you will find that in the end your development time will go faster using the bootstrap library vs starting out with a vanilla responsive grid and having to keep adding on.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.