Help - Search - Members - Calendar
Full Version: Browser Resolution
MonsterSmallBusiness Forums > MonsterWebDesign > Designing Your Storefront
krazykickz
Hi,

I have noticed that with monstercommerce sites, there should be a way for the pages to expand.


For example say we have the site at 90 percent It looks fine in the higher resolution but when you switch to 800x600 everything looks so big and swished up. I think it would be good that if on the 800x600 browser it would automatically expand to the full 100% like most sites do.

Captain
This is what MC stores have been programmed to do... the way you design your store will reflect this. I have sent this to one of our designers to post a detailed explaination. smile.gif
Cwazydawg
Krazykickz,
In the current monstersmile.gif Commerce software to make your site expand out to the fullscreen of the browser window do the following:
1. Log into your admin panel
2. Go to Site Html - Top of Page Editor. At the top of the screen there will be an area for pixel width or percentage width. Make the screen width set to percentage and make the numeric amount 100. This way your site will always be 100% and expand to the full width of your browser.

At monstersmile.gif Commerce Design we design all of our sites for 792 pixels wide. But usually when we go to integrate them into the stores we set up the sites to be 100% width. This way the sites are always full screen.

Sometimes you may want to make your site a fixed width and not a percentage width for asthetic reasons. The primary concern against this is that you have to be very meticulous with the rest of your site meaning you cannot have any of your product pictures larger than 300 pixels wide or your middle area of your site (left, center & right columns) will balloon outside of the top and bottom portions of your site.

Let me know if this makes sense smile.gif
krazykickz
Hey Crazydawg,

I was viewing v4.0 theme builders and I notice a lot of them are not set at 100%. I tried to go to the top of the page editor and expand it to the 100% but did not see the feature to do it here. Is it available for themes that have been provided to us?

Thanks
skipper
Hi! Many of the site themes are not set to 100%, you are correct. From a design perspective, a little smaller than 100% is the way to go...However, if you would like to stretch it fullscreen - which makes sense as well - simply follow steps below:

In Site Layout > Site Page, Borders & Misc., adjust page size to 100%

Then, In Site HTML > Top of Page Editor, change table percentages to 100% (versus 90% or 80% or whatever is in there) and save. Or you can modify in WYSIWYG tool.

HTML Code to Change:
<table ... ... width=" x "> The value inbetween " ", is what you want to say "100%"

It sounds more complicated than it truly is. If you have any problems or questions, let us know!
Cwazydawg
Skipper beat me to the answer. One cool aspect of our cart has been if you want to make your site almost full screen but leave a small buffer around your site as an 'effect' this is where the percentage width comes to play. This obviously can be played around with. Or if you really want to be specific with your width, change the setting to a pixel width. Hint: our cart is designed for 792 pixels wide.

One thing I am really looking forward to v4.0 is its design versatility. We turn out a lot of designs in the MC design department and it will be extremely satisfying to be able to turn out completely new approaches to cart designs because of v4.0's new advances! Stay tuned sportsfans, it will be awesome!
marukoo
So how should I do it to make my site work best with 800 x 600?
krazykickz
Marukoo,

I would strongly reccommend designing your site in the 800x600. Even though I do not use this browser, it is smart and essential in my opinion.

Also if you are using monstersmile.gif's themes, then you should have no problem with the page having the excessive scroll bar, etc...

I recommend switching between browsers every now and then just to make sure it is displaying right.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.