Jump to content

[Resolved] Funky appearance problems with browsers


creters

Recommended Posts

Have looked at a few open source e-commerce solutions and have to admit that CubeCart is about the easiest of them all. However, notice during the testing phase that different browsers give different results when using the Foundation skin in regard to the appearance of the store. Older browsers (assume that the user would be using the latest and greatest but not always the case) show pages with a wide black border on either side and the middle section of the actual home page, product page, etc, in the middle. Very unreadable and very hard to navigate. Other browsers (like Slimjet, some newer versions of Firefox and newer versions of Opera) show a proper page, but the featured item and bestsellers are cut off and there is no horizontal scroll bar to alert the user that additional information is "hiding" on the right side of the page. Turns out that if I zoom down to about 90% the page will display correctly. Looked around the forum and didn't find a solution to this and right now only thing I could think of doing is to place a notice in the "slider" on the home page alerting users to upgrade their browser and/or zoom out to show pages properly (assuming they don't have the "see the middle only" issue). Right now, Vivaldi seems to be only browser that displays the page as it should be. Looked in the Admin panel to see if maybe I could "downsize" the page to at least fix the zoom issue, but either overlooking where it is or not there at all.

Link to comment
Share on other sites

bsmither: I went ahead and opened the link you provided to the Demo Store. Here is what happened using a couple of browsers: Opera 12: get the "three column" split screen. Login/Register to the left in a black column, the middle half of the actual home page in the middle, and black on the right. Slimjet: Looks as if it opens up correctly but Featured, Best Seller and Sale Items not showing initially and no horizontal scroll bar on the bottom to slide it over to see. Had to zoom to 90% to get entire page to show. Vivaldi: seems to be working fine.

Dirty Butter: I haven't tried emulators but I have opened versions of Opera, Chrome, Firefox, Vivaldi and Slimjet on two different computer with same results. If you want to look at the site, it is at http://open4biz.biz/gtg

Thanks both of you for the input. 

Link to comment
Share on other sites

I cannot comprehend what a "three column split screen" looks like. Please try make a screen grab (then reduce its size to 320 px wide - we don't need to see it 100% detail) and post it to this conversation.

The site at "Good Turn Gifts" is fine.

"Featured, Best Seller and Sale Items not showing initially"

Foundation is "responsive". Given that, if the number of capital-letter M's are only so much across the width of the screen, the right-hand side-column's display is suppressed. Once more M's can fit in the width of the screen window (called a 'viewport'), then the right-hand side-column becomes visible and takes up space.

Like-wise, as the number of M's that will fit across the viewport decreases (that is, the size of the M's get wider, or the size of the viewport gets narrower), eventually the page takes on a more stream-lined layout and everything is in one single column.

So, your browser is telling the CSS that only so many M's are going to fit across the page, and the page takes on a layout appropriate to the amount of screen space it has to work with.

Link to comment
Share on other sites

Here are pics of what I am experiencing. They are all of the Demo Cubecart site but pretty much the same results on my website. The first pic is what I am experiencing on Opera 12 and most older browsers in general.  The second pic is what I experience using Firefox and Slimjet without playing around with the zoom (zoom is at 100%). Third pic is how the webpage looks under Firefox and Slimjet when the zoom is adjusted down to 90%. Once again, no horizontal slidebar on the screen to indicate the webpage extends past the screen on the right side. For now I guess I'll just put a notice in the slider telling customers they may have to zoom out to see the full page or upgrade their browser 

opera12.jpg

slimjet1.jpg

slimjet2.jpg

Link to comment
Share on other sites

Excellent -- in that you were able to post screen grabs.

Not so much for Opera -- it seems the browser isn't understanding most of the innovative CSS technology employed: "media queries".

Images 2 and 3 are perfectly fine. Image 2 shows what the layout should look like when the number of capital M letters is less than the cutoff point between the "medium" layout and the "large" layout. The "medium" layout suppresses the display of the right sidebar.

So, the next relevant question, when viewing the page at 100% zoom, what are the following values

1. If the browser is maximized on the computer monitor, what is the number pixels across of the monitor? Perhaps 1024 pixels wide?

2. In the browser's Options settings, Content tab (maybe uses a different name), Default fonts and colors, Font Size, what is the value for "Sans Serif"? Perhaps Arial-16?

That's the thing about browsers. The browser user can override the HTML/CSS of the page -- typically the zoom factor and default font size. (CubeCart uses the browser's default font size as the starting point for all relative font sizes.)

 

Link to comment
Share on other sites

Funny thing you mention the fonts. I started playing around with those after my last reply. You are correct. The setting for sans-serif is Arial-16. The pixel size is 1024 (or at least I should say that I resized a pic to 1024 wide, opened it in the browser and it perfectly fit a maximized window). 

I understand how all the things mentioned previously can affect how the site appears on the screen. My concern is that customers would visit the site and, depending on their browser, not realize that there are featured items and a bestseller list sort of "hiding". And for those with older browsers (who you think would upgrade to at least something more recent) they would just assume the site is "broke" since it looks weird and operates a bit funky. Do have to admit though, that when I open the site on a mobile phone it looks nice and it is easy to navigate.

Link to comment
Share on other sites

If we can agree that "responsive" skins is the way of the future(re: media queries), and that it is well entrenched now, then such users of such browsers must be experiencing a large number of apparently misbehaving websites. It is said, "When all the world seems insane, maybe its you."

I see your point about those who have that specific laptop, netbook, iPad, whatever that has that 1024 pixel-wide screen or smaller. (That was a standard resolution back two generations ago: 1024x768.)

If the content boxes that would be shown in the right sidebar (currently Featured (random) Product, Best Sellers, On Sale) are important to the designs of your business (which they won't be for others), then we should start work on customizing a skin to move those content boxes to a different area of the page, maintaining some semblance of nice visual "flow".

 

Link to comment
Share on other sites

If you are interested, let's see if we can get the content that would show on the right sidepanel on a large screen, to show somewhere on a medium screen.

In the Foundation template main.php, find:

            <footer>
               <div class="row">
                  <div class="medium-7 large-7 columns">
                     {include file='templates/box.documents.php'}

Add the following ABOVE that:

            <div class="row {$SECTION_NAME}_wrapper show-for-medium-only">
               <ul class="medium-block-grid-3" id="sidebar_left">
                  <li>{include file='templates/box.featured.php'}</li>
                  <li>{include file='templates/box.popular.php'}</li>
                  <li>{include file='templates/box.sale_items.php'}</li>
               </ul>
            </div>

This creates another row just above the footer, and contains the three content boxes in a three-column grid. (In Foundationv5, the grid only works with a list structure.)

Two things left to do: the Featured Product panel is now wider than a normal product panel, so it will need to be tweaked; and the height of each box will need to be equalized.

Link to comment
Share on other sites

bsmither: code you provided did the trick. Not only does it allow featured/best seller to show at bottom in those cases when they don't normally show on the right side, I also noticed that if I play with the zoom the featured/best seller will adjust appropriately either to the right side or bottom depending on the zoom.

As for tweaking the layout, I guess the third empty area at the bottom (featured, best seller then an empty area) is a lot better than having an empty area in the middle of the listings somewhere. And I guess the easiest edit for the height of the boxes on the bottom would be to limit bestsellers to 5 instead of 10 to even it up a bit more. (Some customers had already said that a list of 10 seems a bit overwhelming for them).

Tried a mobile phone after the coding change. Thought maybe featured/bestseller would show at the bottom there as well but it did not. However, I am told mobile users prefer things short and concise instead of run on and cluttered (at least as viewed on a phone). So no biggie there. 

Do appreciate you looking at this and working with me. I think I have a good enough fix/tweak to proceed from here.

Link to comment
Share on other sites

The empty slot is for Sale Items. Either you have no items on sale or have chosen not to show them. We can test for the presence of the Sale Items box and switch to a two-column grid instead of three as appropriate.

The content boxes can be equalized in the same manner as the product panels as seen in the Latest Products. You don't see this effect because the equalizer javascript sets the heights of the panels right away. If you can have your browser switch off the javascript, reload the page, and you may see the unequalness of those panels.

I'll have those tweaks shortly.

 

Link to comment
Share on other sites

Let's replace the code that was newly added with this version:

<!--{literal}-->
            <style scope>#sidebar_bottom .panel {height:100%;}</style>
<!--{/literal}-->
            <div class="row {$SECTION_NAME}_wrapper show-for-medium-only">
               <ul class="medium-block-grid-{if $CONFIG['catalogue_sale_mode'] gt 0}3{else}2{/if}" id="sidebar_bottom" data-equalizer="sidebar_bottom">
                  <li><div data-equalizer-watch="sidebar_bottom">{include file='templates/box.featured.php'}</div></li>
                  <li><div data-equalizer-watch="sidebar_bottom">{include file='templates/box.popular.php'}</div></li>
{if $CONFIG['catalogue_sale_mode'] gt 0}
                 <li><div data-equalizer-watch="sidebar_bottom">{include file='templates/box.sale_items.php'}</div></li>
{/if}
              </ul>
            </div>

We are adding a style rule here that references the panel class only within the sidebar_bottom list structure. This prevents the rule from applying to all the panel class objects located elsewhere (like when the right sidebar is visible).

Then, in the list structure, we are attaching the data-equalizer effect to the list items. This makes the list items all the same height.

Unfortunately, the stuff inside the listing is within its own container, and that container will be as high as it needs to be. That's why we added the style rule to make those inner containers as high as possible.

We also added a test that, if the Sale Mode is on, then there will be a Sales Items box. Thus, the grid is three-wide, otherwise the grid is two-wide and the list item is not present (otherwise there would be an empty grid cell for it on a following row).

The reason for the {literal} statements is because, as this is a Smarty template, these commands tell Smarty to ignore the effect of braces -- which otherwise delineate Smarty commands and variables -- as used in the CSS rule structure.

We still need to center the image of the Featured Product box, especially now that these content boxes are ridiculously wide.

Link to comment
Share on other sites

  • 2 weeks later...

More cosmetic and curiosity than anything else: Noticed that when I applied the patches above, the footer is about six inches wide even though there is only about two inches of links, etc. in it. Was this caused by applying the patches? Never paid too much attention to the footer in the past so not sure.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...