Solved

Some questions regarding responsive design and css

Posted on 2016-08-10
5
77 Views
Last Modified: 2016-08-11
Hello;
I'm trying to convert a website to responsive and have watched several hours video on youtube ,now have these questions:

1-What is the principal of css for a container?

2-When we don't know the amount of a 'height' in css must we set it to 'auto'

3-When we use from html5 tags like 'footer' ,this tag act as a container?

4-What is best definition for mobile size for responsive(e.g min=320px  and max=600px)?

5-Can we put a rang of size for mobile in 'media query'?
for example :
@media only screen and(max-width:320px) and(max-width:600px)

6-When we reach to a breakpoint we can non-display a <div>,how can we replace another <div> to that <div>?

7-When we have a container and inside it have several <div> tag ,and reach to a breakpoint for responsive ,applying css to container for responsive is enough? or we must apply width to percentage for all nested <div> inside the container?

Thanks
0
Comment
Question by:MOSTAGHASSI
  • 3
  • 2
5 Comments
 
LVL 21

Accepted Solution

by:
Kim Walker earned 500 total points
Comment Utility
1-What is the principal of css for a container?
This is the second day in a row that a question has referenced a "container" although I believe you are using it differently than the other question did. This word is not commonly used in web development so it is difficult to answer the question. Can you elaborate on this part of your question so we can determine the context? Are you referring to a wrapper?
2-When we don't know the amount of a 'height' in css must we set it to 'auto'
The default value for height is auto, so it is not necessary to set a height to auto unless you are overriding a previous fixed height value.
3-When we use from html5 tags like 'footer' ,this tag act as a container?
Again, we need to know more about your use of the word "container."
4-What is best definition for mobile size for responsive(e.g min=320px  and max=600px)?
This is more or less a matter of personal preference. But 320-600px is a good range.
5-Can we put a rang of size for mobile in 'media query'?
for example :
@media only screen and(max-width:320px) and(max-width:600px)
Close, 320 should me the min-width.
@media only screen and(min-width:320px) and(max-width:600px)

Open in new window

6-When we reach to a breakpoint we can non-display a <div>,how can we replace another <div> to that <div>?
I will frequently have two different divs for different screen sizes. I will set the display to none for the inappropriate div and then in the media query, I will set the other div to none and the more appropriate one to display: block;

For example:
HTML
<div class="mobile">This is content for mobile devices</div>
<div class="desktop">This is content for desktop devices</div>

Open in new window

CSS
.desktop { display: none; }
@media only screen and(min-width:1080px) {
	.mobile { display: none; }
	.desktop { display: block; }
}

Open in new window

0
 

Author Comment

by:MOSTAGHASSI
Comment Utility
Thanks Kim,regarding question first,yes my mean is a wrapper like:

<div class="maincontainer">
  <div class="mainleft">
  </div>
  <div class="mainright">
  </div>
</div>

Open in new window


And also please let me know your idea about question 7.
0
 
LVL 21

Assisted Solution

by:Kim Walker
Kim Walker earned 500 total points
Comment Utility
More about question #1
I've seen expert comments recently that suggest that a wrapper is the solution to all problems. I'm not sure I agree with that, but I do use a wrapper on every page I create. My use of a wrapper is to limit the area allotted to the actual content of the page. Not many people want to open up a page on a wide-screen monitor and see content stretching all the way across the screen. So I allow the background image or color to extend to the outer boundaries of a large screen but limit the content to a comfortable area in the middle of the screen. Or I might have several wrappers that I arrange horizontally on a wide-screen monitor but vertically on a mobile device. For me, wrappers are more about aesthetics than about content. The CSS for wrappers is usually limited to positioning, floating, and dimensions.

More about question #3
I suppose a footer element could act as a wrapper. I believe the new elements of HTML5 are more about accessibility than about function. Visitors with sight-related challenges often use screen readers and other assistance devices to peruse web pages. A screen reader would alert the visitor to a footer element and the visitor would know what type of information is usually contained in a footer and have the option to skip the entire element. Otherwise, a footer element is no different than a div with an id or class name of "footer."

7-When we have a container and inside it have several <div> tag ,and reach to a breakpoint for responsive ,applying css to container for responsive is enough? or we must apply width to percentage for all nested <div> inside the container?
I'm not sure how I managed to overlook question #7. But as it pertains to containers, it's just as well that I did.

But there really isn't a definitive answer to this question. It all depends on the circumstances. It may be sufficient to adjust the size and the positioning of the wrapper for different screen sizes and orientations. But often it may be necessary to adjust the size of the child elements within that wrapper.

Additionally...
You will find it is much easier to use a mobile-first approach to responsive design. Let the mobile device be your primary design and then program your larger devices from there. I usually let my base CSS stylesheet be my mobile stylesheet. Then my responsive stylesheets are for tablet or large-screen (and sometimes extra-large-screen) devices.
0
 

Author Comment

by:MOSTAGHASSI
Comment Utility
Thanks,i got my answers,but regarding the mobile-first ,as my understanding ,the first css codes that load is better that be belong for mobile and so in media query we must work with min-width instead of max-width,but still it is not clear for me regarding the designing that ,visually we must design page for desktop so we have a perspective from page then we can say that the arrangement for mobile must be like this and change the css for mobile,so it is not clear that while i must design page visually for desktop,that how can change it  mobile-first?

Please let me know that am i right that designing the page first must be for desktop,because first we must have a outlook from our page?

But ,it is difficult for me that then how can change the css codes so it be for mobile-first?

I don't know that could i write the things that is in my mind?/thanks
0
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
Mobile-first design means that you design your page for mobile first, then expand that design for tablet and desktop. It was difficult for me to accept until I did a few sites this way. It was contrary to logic until I saw how much easier it was. Start with the minimum content you have to deliver, design that for mobile devices, then expand with details and options that were hidden in the original CSS for mobile devices.

There is a trend these days of designing the page for mobile, then enlarging that design for desktop. So when you view the page on a 24" wide-screen monitor, you see the same content you would on your 4" mobile device, just enormously large. In my opinion this is unfortunate. https://www.olympic.org is one example. View this on your mobile device and then again on your desktop and you will find that your large screen provides very little more content than your mobile device. In my opinion, this is an example of the wrong way to design mobile first.

This site, EE, is a good example of the right way to handle responsive design, content-wise. As the screen gets larger, more information appears on the screen. Unfortunately, it does not utilize a mobile-first approach.

The key, though, is your target audience. Do you expect more visitors will be using a mobile device or a desktop device. If you are targeting the younger generation, especially non-professionals, you should expect more visitors will be using a mobile device and that should be your primary focus -- to deliver the richest content to the maximum audience.

I should add, though, that I was born without any creative skills whatsoever. But I compensate for this in logical thinking. I am very left-brain-dominant.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now