Why are browsers so picky?

Commenting out all of those three lines (37,38,39) in bubble6a.js the bubble positioning glitch is solved ;).

Is the change posted on your site?

Of course!

I ask because, although the glitch seems to be gone, those 3 lines are not commented out in bubble6a.js. Rather, they are enabled: (perhaps that is what you meant?)

<aside> I’m quite excited to see the fixMenu contraption working so well in real time! </aside>

That was what I meant :sweat_smile:

I like it more than the original too.

Is still the offer of help in making it responsive on the table?

Or maybe I am better off buinding a new one altogether. In this regard you might want to read what I’ve written in the CMS & Wordpress section

Early in this thread you made it clear that you are attached to this layout. And I think most folks made it pretty clear that changing this staunchly FIXED layout to a responsive layout would be difficult AT the LEAST.

I have a couple of opinions about it, but ultimately, both say that the work involved may be much greater than you expect and I am not confident that you are willing to make the graphics compromises needed. You really DO seem attached to this layout. :smile:

What will likely have to change as the width of the layout is reduced? The flash vid will not scale down gracefully. It’s made against a white background, not a transparent backgound and that’s a problem when resizing it. White lines can appear at the edges.

The animated menu is a goner whenever it reaches a width at which it needs to wrap because it will not wrap.

Most of the content styles depend on the existing fixed width layout. You will have to decide on a narrower width layout for some or most and restyle the content.

All of this and much more will require time, graphics work and compromises.

Whether to start afresh or modify the existing design is up to you.

Consider this: you have 8 main pages (I have not paid any attention to other pages). The background image for each of those pages is 1100 x 500. That has to be converted into an image/s that will repeat as needed gracefully. Think about doing that for each main page. That’s the obvious challenge number 1. Yes, it can be done with some compromises, but are you interested enough to do it yourself? Start with the first page. In fact, it might be best to ONLY work on the first page. If it can be modified successfully, then the others should be easier based on the lessons learned.

Consider the work, your grahics talents and decide how committed you are to the existing design.

As an aside, I recommend reducing the number of animated objects on your site. They do not contribute to the content nor to the enjoyment of the site when they slow it down.

1 Like

It does require quite the deal of compromise indeed.

Is there any way to make it visualised always in its entirety on the browser area

This way to be clear:

(although the top part is slightly hidden I believe you got the drift)

That way the “double scrolling” (see post no 52) would be eliminated as users would be required to scroll just contents within the box. It wouldn’t be responsiveness or fluidity just a mere adaptation in proportions.

Is that even possible? Have I been clear enough?

It sounds like you are asking if your web page can auto-resize to fit into a viewport (regardless of orientation)
that is smaller than the native size of the site like an image would fit into a box using {background-size:contain}
and the viewport would never generate scrollbars.

Is that what you are suggesting?

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

http://tympanus.net/codrops-playground/SaraSoueidan/75hi7S02/embed/result,html,css/

…or bigger. Yes. I think it is what I meant.

It is that possible? It would solve quite a few issues.

What happen “width-wise” in mobile browser I believe.

Mobile browsers (like desktop browsers) generate vertical scroll bars if the height of the page exceeds the height of the browser window and horizontal scroll bars if the width of the page exceeds the width of the browser window.

{background-size:contain} is a property that can be applied to background images. It’s about width and height being considered simultaneously so that the first to fully fit the available window space stops the expansion of the image so the entire image fits within the window without skewing/distortion. The links should have demonstrated that effect for {background-size:contain}. I used that effect as a visual example of what I believe you are asking to do with your fixed width web site.

The answer is “To the best of my knowledge, No”. There would be no need to design responsive pages if that were the case.

It sounds like your best bet is to be happy with your artistically designed fixed width site and create a second fluid or responsive site for your sales products and wider public consumption on mobile devices.

No doubt about it, but (regardind my website which is even absolutely unresponsive) then all the browsers in my mobile excepted fireforx (poor fella…) are automatically assessing its maximum width, cropping the white on both sides and adapting the content to the viewport width.

It is possible to zoom in but not out.

I’ve must be misunderstanding something, because that sounds “normal” to me.

Interpreting: the problem with cropping the white on both sides is that the height of the content area iut short and the browser’s scroll bars appear. IS that the problem? Are you trying to keep your inner scroll bars and not have browser window scroll bars?

`

Why don’t you change the content background images so the page can stretch as long as it needs to and so the user only has to bother with the normal, expected vertical scroll bars and none of the inner scrollbars? That would be the behavior that users expect.

What do you mean by this? What are you trying to accomplish?

When I say “mobile browsers” I’m referring to browsers operating on and developed for smartphones (IOS/Androind). They are not a.f.a.I.k. like desktop/laptop ones.

This doesn’t happen on browsers for desk/laptop. They don’t crop and adapt content.

All this was just a consideration about the fact that there is no way to adapt a fixed, complex content to a viewport, (as you stated: “There would be no need to design responsive pages if that were the case.”) BUT mobile browsers do. Yes, them, not websites. End of my consideration :blush:

That was my intention, but you told me that it should not be possible.

Yes, that would be the plan. And before going into details I asked for:

and you catched immediately the drift. NOW, is it possible to let JUST the bottom part of my website to adapt to its correspondent (bottom) part of the viewport?

I can’t believe you are still following my argument. Thank you for that :yum:

The desktop browser I am using has a “fit to width” button that forces any web page to adapt itself to fit the viewport width. So desktop browsers that adapt do exist.

That’s correct. They generally give you a manual “zoom” command instead.

Add this meta tag in the <head> portion of the page and let me know what happens:

<meta name="viewport" content="height=780, initial-scale=1">  <!-- ADD THIS -->

Wild guess (Anyone with mobile device experience is invited to contribute their experience here.)

I haven’t been following this thread too carefully - way too many posts. Could you explain the issue Ron?

I think I’m actually in fairly good stead at the moment. The OP has a fixed width and height site that he wants to display in mobile devices without scrolling. The above meta tag works in an android device. Will have to wait and see how it behaves for the OP.

Note: he did not ask that the text be large enough to read. He just wants to preserve the look of his site rather than convert it into an actual responsive/fluid site.

It could be “zoomed” no? Though I guess that would result in scrollbars.

That’s a dangerous situation given all the different devices he’d need this to work on.

His call though.