I'm having an issue where my sidebar on the site on mobile and 125%+ on desktop are overlapping. Now i imagine it is something to do with my breakpoints, I have tried to make a smaller breakpoint but it is only allowing me to resize everything for all breakpoints (menu, header, sidebar) etc..
Is there a way that I could maybe put a button for a drop down, or just resize it so i don't overlap the sidebar menu?
website is: mackgraham.ca
All help is appreciated here
You shouldn`t watch websites at 125%, I assume. Watch it at 100% and it should work pretty well.
From what I see on your link you didn´t create a responsive website. In smaller breakpoints you have to replace and maybe resize your elements. It may also help if you set the image to be responsive in width and height. At the moment it is simply fixed to one size, isn´t it?
Thanks for the response..
Yes the issue i am having is only on the mobile version of the site...
I have not made a mobile site yet, and was hoping to just have it as it is now.
Is there anyway to keep the sidebar from overlapping content on the mobile site?
I have tried resizing the breakpoints but i cant make the font or sidebar any smaller or it adjusts the size of it on all breakpoints.
If you can’t make the font smaller, the sidebar can’t be smaller – what means: Your layout is not appropriate. Create a new layout in this case.
And: Of course you can make the font smaller breakpoint-wise:
Unfortunately, there is no way to create a responsive(!) area next to a fixed width area in Muse.
Muse calculates responsiveness according to the window width. If you have a side bar, it would have to be able to calculate responsiveness according to window width – side bar width. This isn’t doable – what means, you have to rethink your design.
If you have access to the Muse Prerelease forum, have a look at this thread: https://forums.adobeprerelease.com/muse/discussion/4776/sidebar-the-forgotten-feature
If you don’t have access, you may sign into this forum.
Talking about fixed width web sites , it is no real problem to achieve, what you want: You have to resize the image breakpoint-wise, so it „snaps“ to the new size, when a fixed breakpoint is reached. Attention: Don’t pin the image at all!
By the way: I think, you have responsive breakpoints (though unnecessary on your site) and the image is pinned to the right. Revert your breakpoint(s) to fixed width (double click onto the breakpoint icon in the breakpoint bar) and set it from „fluid“ to „fixed" width.
Hey thanks for the response...
I guess my main question is if you can edit the breakpoints separately from one another, which would be great... Although it does not sound like the case.
How are other websites able to not have a mobile design and content not overlap itself on mobile?