Solved

Hiding panels as page width shrinks

Posted on 2014-03-11
13
312 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:BobCSD
  • 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 1

Author Comment

by:BobCSD
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
 
LVL 1

Author Comment

by:BobCSD
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 1

Author Comment

by:BobCSD
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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 1

Author Comment

by:BobCSD
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 1

Author Comment

by:BobCSD
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 1

Author Comment

by:BobCSD
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

707 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

15 Experts available now in Live!

Get 1:1 Help Now