Solved

Hiding panels as page width shrinks

Posted on 2014-03-11
13
320 Views
Last Modified: 2014-03-12
http://www.seo-theory.com/2012/05/02/are-subdomains-bad-for-seo/

In the above web page, when opened to full screen you see side bars on the left and right.


full screen
Shrink the page and the image on the left is hidden. (That part I get.)

mid screen
But the weird thing is, shrinking it even more, both the left and right side bars disappear. How do I do that?

small screen
thanks!
0
Comment
Question by:Starr Duskk
  • 6
  • 6
13 Comments
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39921599
It's called responsive design and it's a technique that uses JavaScript and css to change the layout according to the screen size.

The most popular framework for that, at the moment, is Bootstrap, I think.

This is the theme used on that site: https://wordpress.org/themes/magazine-basic

It's based not on Bootstrap, but on Gridiculous.


HTH,
Dan
0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 39921633
Is this something I can use a an asp.net developer?
0
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39921652
The technique is mostly CSS/JS, so you can definitely use it with php, asp, ROR or whatever generates HTML code.

Try this tutorial and see if you like it: http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/

Also, see examples here: http://getbootstrap.com/getting-started/

Dan
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 2

Author Comment

by:Starr Duskk
ID: 39921688
In the demo you sent me it says:
"Twitter Bootstrap is so easy that it doesn’t let you do anything inside CSS stylesheets. You have to just use the resources it provides. This is what makes it one of the most powerful CSS frameworks in the industry."

Is he correct? I can't create my own CSS stylesheets? I have to use only what it provides?
0
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39921708
Yes and no.
You can customize your Bootstrap CSS files here: http://getbootstrap.com/customize/

Or, you can modify the source. It's open-source, this means you can do whatever you want.

See this article: http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/
0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 39921796
As an asp.net developer, I use app_themes.

Are you an asp.net developer? Do you know if I can continue to use my app_themes?

I want to just create my master page using the jello-mold, hiding panels type look. But throughout the rest of the site, I want my controls to use my own styles.

thanks.
0
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39921836
Nope, not an asp developer.

You don't have to use Bootstrap just because it's popular.

Here's an article on using Foundation framework with asp.net: https://www.simple-talk.com/dotnet/asp.net/responsive-design-using-foundation-with-asp.net-mvc/

If you're going into responsive design, I would advise to go all the way. I see no point in only your home page looking nice on a phone :)
0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 39922040
Dan,

>>If you're going into responsive design, I would advise to go all the way. I see no point in only your home page looking nice on a phone :)

In asp.net the masterpage is what determines the style for every page on the site, not just the master page.

Also, you say "on the phone." The example I gave wasn't looked at on the phone. I was just impressed that it handles different resolutions. Of course, phone is great as well, and my ultimate goal. But when I think of this, it's a solution for everything, not just phone.

Isn't that what this all does too?

thanks.
0
 
LVL 34

Accepted Solution

by:
Dan Craciun earned 500 total points
ID: 39922055
Responsive's design entire goal is to design your pages so they're usable on a 30" 4K monitor and a 4" phone, by automatically re-sizing and re-arranging your page components.

One of the side effects is that the content's layout will change as browser's width change. Nice to have, but just a side effect. The end goal are mobile devices.
0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 39922075
Thank you so much! After searching for "responsive design" I found out what I need without having to use an add on. I'm pretty certain I can accomplish it with @media queries.

thanks!
0
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39922083
Glad I could help!
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39924008
If you are going for the 4K monitor, you will want to switch out your video and pics for a nice resolution :)

>I'm pretty certain I can accomplish it with @media queries.

yes, that is the heart of bootstrap and foundation and others like it.   However, bootstap et el are just the basics and not meant to be a theme.   If you try and start this on your own, you will quickly see it is not as simple as it appears.   At the very least, I would use bootstrap just for the grid and as Dan eluded to, you don't have to download the entire bootstrap framework.

If you look at the examples of bootstrap, you will see things appear and hide based on the viewport size. This is a function of media quieres.  You can see they use lower than 768, above 768, above 991 and above 1200px wide http://getbootstrap.com/css/#grid 

There is a bit of a learning curve, but I have used it so much it is second nature.
0
 
LVL 2

Author Comment

by:Starr Duskk
ID: 39924080
Thanks for the further feedback.

I have since found out that Telerik offers the RadPageLayout which does exactly the same thing on a 1/12 column structure.

http://www.telerik.com/help/aspnet-ajax/page-layout-overview.html

I am a Telerik subscriber and that's what I'll be using.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

809 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