Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 344
  • Last Modified:

Hiding panels as page width shrinks

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
Starr Duskk
Asked:
Starr Duskk
  • 6
  • 6
1 Solution
 
Dan CraciunIT ConsultantCommented:
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
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Is this something I can use a an asp.net developer?
0
 
Dan CraciunIT ConsultantCommented:
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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
 
Dan CraciunIT ConsultantCommented:
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
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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
 
Dan CraciunIT ConsultantCommented:
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
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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
 
Dan CraciunIT ConsultantCommented:
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
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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
 
Dan CraciunIT ConsultantCommented:
Glad I could help!
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now