Copy link to clipboard
Copied
Hi Forum
Have been going around in circles and thought I would ask.
I understand the concept of browser width and page size when creating fixed width breakpoints and all good at larger screen sizes.
I am wishing to keep with the new Muse responsive/adaptive process and realise that going back to the alternate layouts is an option.
However with tablet and mobile devices I cannot solve a fixed breakpoint issue:
To achieve a fixed BP for tablets and mobiles without the canvas size interfering.
In that the page size will always be smaller than the fixed BP – but the tablet and mobile will bring in the BP size so therefore pages display smaller than desired in viewer window. ( Yes if (a) I make the BP fluid – but do not wish to due to complexity of elements or (b) create another BP 25px less, then i can fudge my way around this).
When I create a fixed width break points at 1064 and 768. The canvas size of the 1064 is 1064 and page size is 769.
The breakpoint of 768 the canvas size is 768 and the page size is either the smallest page size set in page properties or 1 pixel larger than the next smaller break point.
When the tablet pulls in the page it pulls in the canvas size. See image.
I am trying to achieve a fixed BP for tablets and mobiles that will allow the page size to be without the canvas size interfering. ( to restate...Yes if (a) I make the BP fluid – but do not wish to due to complexity of elements or (b) created another BP 25px less, then i can fudge my way around this).
I have read the comments by Pavel/fotoreader & Gunter on Fixed width responsive quirks and Fixed Breakpoints Cannot Have Own Page Widths? plus watched both of Dani's video's on fixed width responsive. Pavel had mentioned creating a simultaneous 768 BP of fluid and fixed but pretty sure that cannot occur except if one BP is on the masterpage and the other on the design..and testing this had no impact.
Anyways thanking you in advance
M
Copy link to clipboard
Copied
Do you see any possibility, to describe your issue in simple, clear and short words? Please be aware, that many – if not most – of us aren’t native English speakers. I, for my part, unfortunately don’t understand, what you want to know.
Copy link to clipboard
Copied
Hi Gunter thank you for the prompt response and reminder that this is an international forum...will try again, here goes..
1. When creating a 'fixed breakpoint' extra width is added either side for the 'bowser' - the 'page size' then becomes either 1 pixel larger than the next breakpoint size, or the minimum page size set in 'page properties'.
– therefore the 'fixed breakpoint' is larger than 'page size'.
2. However tablets and mobiles, bring in the fixed breakpoint size (including the added browser canvas width) not just the page size.
– therefore on tablets and mobiles the active page area is smaller than the display. (see attached image – yellow is the breakpoint size - white the page size).
3. So I am trying to achieve a fixed breakpoint for tablets and mobiles that will allow the page size to be without the browser canvas size interfering.
( Yes ....if (a) I make the BP fluid – but do not wish to due to complexity of elements or (b) create another BP 25px less, but then this creates a lot of extra BP's.....(C) go back to alternate layout.. then i can get around this).
all the best
sqpeg
Copy link to clipboard
Copied
It is still very unclear for me. One of the reasons: I don’t know if you are talking about
The solution, as far as I am concerned, is, to give us a blank .muse file via Dropbox, CC Files or similar services, demonstrating your issue. Then we will see …
But I am not the only one here. Perhaps other community members are not as uncomprehending as I am.
Frankly spoken: I even don’t understand the „sentence“: „Tablet portrait brings in fixed 768 breakpoint page size 480“ My English is not that bad, but …
What does tablet portrait bring in? Fixed Breakpoint 768 page size 480. Are you really sure, a native english speaker, who understands every word, would understand the meaning?
Copy link to clipboard
Copied
Thanks all again for your patience ..I will give it one more go...
Why? because when a tablet or mobile device displays the page, it includes not only the page width, but also the browser canvas width set by the breakpoint as well, therefore making the page width smaller. When displaying a page on a tablet, for example in portrait position, the display shows the 768 fixed breakpoint but the actual page size is smaller, because part of the 768 width is taken up by the addition of a browser canvas.
thats all I've got, no file to send as such a generic question.
all the best
sqpeg
Copy link to clipboard
Copied
sqpeg schrieb
Thanks all again for your patience ..I will give it one more go...
- Q: Can I achieve a 'fixed breakpoint' without Muse including the addition of a browser canvas either side of the page?
Have no idea, what you need. There are fixed width breakpoints. No fixed breakpoints.
Without Muse including the addition of a browser canvas? Decisions are there to be made, mate. You have to respect the guides in a fixed width layout, so you always cannot use the full width except for elements that are "stretched to browser width".
This is no matter of desktop, tablet, mobile. The red area should not contain any elements.
Let me add, that mobiles like fluid width designs, but have seen some fixed width layouts, too, which "work" quite nice.
Best Regards,
Uwe
Copy link to clipboard
Copied
Thanks fotoroeder, will carry on with my work arounds.
I have also gone back over your comments from
all the best to all
Sqpeg
Copy link to clipboard
Copied
Copy link to clipboard
Copied
No, it is definitely not all! There are many informations missing.
i think you would already have an answer, if you gave us a file, so that we see, what we are dealing with.
Copy link to clipboard
Copied
Q: Can I achieve a 'fixed breakpoint' for tablets and mobiles without the browser canvas interfering?
The short answer is - no you can not.
"Browser canvas" is necessary so that you do not set breakpoints through each pixel. Create your design based on this or use a fluid breakpoint
Copy link to clipboard
Copied
He is able to achieve this, by using adaptive layouts.
Copy link to clipboard
Copied
Thanks all..O.K. got it...signing off.
thought there might be some sneaky html
The main point I kept banging on is that with the 'fixed width breakpoints' the page realestate on the tablet and mobile is narrower, due to the inclusion of the compulsory browser canvas that is applied with 'fixed width breakpoints'. Which on the desktop does not mater but on the smaller screen... it would be great not to have.
Thank you Pavel, Günter, and fotoroeder