Solved

Hiding panels as page width shrinks

Posted on 2014-03-11
13
327 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
13 Comments
 
LVL 35

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 35

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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
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 35

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 35

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 35

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 35

Expert Comment

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

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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... …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

738 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