Highlighted

Website elements are floating in browser

New Here ,
Jun 19, 2018

Copy link to clipboard

Copied

Hello!

I have problem, that all my elements are not browser width. Only the navigation is responsive and keep the browser width, the rest content is just floating between.

I tried to find what is the problem, but could not find ( I deleted one element by one, to find it, but still it is the same).

And it stops doing it around 750px. Above it is responsive, but this weird float thing.

Attaching screenshots.

1. should be like this :

Screen Shot 2018-06-19 at 09.16.07.png

2. But when I scroll down or move the mouse, suddenly I can scroll horizontally.

Screen Shot 2018-06-19 at 09.15.59.png

The hero image is image slideshow.

Thanks!

It IS confusing. Why?

On a responsive page every element influences the others: Push them down, lift them up, … Images scale down, when resizing the browser window, object below images slide upwards in this case. It is really heavy to control all page elements, so that they work perfectly.

If you are new to Muse, why

  • trying to create a responsive site first? I’d start to learn Muse by building a fixed width site. In this case, you can layout as you would do in print layout.
  • why trying to add 3rd party widget (for example the „Search“ widget), before creating the basic Muse site first. 3rd party widget often cause issues.

Views

310

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Website elements are floating in browser

New Here ,
Jun 19, 2018

Copy link to clipboard

Copied

Hello!

I have problem, that all my elements are not browser width. Only the navigation is responsive and keep the browser width, the rest content is just floating between.

I tried to find what is the problem, but could not find ( I deleted one element by one, to find it, but still it is the same).

And it stops doing it around 750px. Above it is responsive, but this weird float thing.

Attaching screenshots.

1. should be like this :

Screen Shot 2018-06-19 at 09.16.07.png

2. But when I scroll down or move the mouse, suddenly I can scroll horizontally.

Screen Shot 2018-06-19 at 09.15.59.png

The hero image is image slideshow.

Thanks!

It IS confusing. Why?

On a responsive page every element influences the others: Push them down, lift them up, … Images scale down, when resizing the browser window, object below images slide upwards in this case. It is really heavy to control all page elements, so that they work perfectly.

If you are new to Muse, why

  • trying to create a responsive site first? I’d start to learn Muse by building a fixed width site. In this case, you can layout as you would do in print layout.
  • why trying to add 3rd party widget (for example the „Search“ widget), before creating the basic Muse site first. 3rd party widget often cause issues.

Views

311

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 19, 2018 0
LEGEND ,
Jun 19, 2018

Copy link to clipboard

Copied

Could you share a small(!!) .muse file with us? Delete everything, except one page and some „critical“ elements, save this .muse file under a new name, upload it to Dropbox, C Files or a similar service, and post the download link here. Then we can have a look.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 19, 2018 0
New Here ,
Jun 19, 2018

Copy link to clipboard

Copied

Thank you!

Here is the dropbox link with muse file.

problem_web

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 19, 2018 0
LEGEND ,
Jun 19, 2018

Copy link to clipboard

Copied

Puh, there are many, many layout issues – too much to resolve them within a forum post.

Some general hint:

  • Please, try to understand exactly, how different elements are scaling and hoe rectangles react, when text is placed onto them. (They try to adapt the size of the text frame)
  • Text frames only scale horizontally and grow – if needed – vertically. Otherwise the text within couldn’t be displayed completely any more
  • Images scale proportionally (width and height)
  • Browser wide slide shows only scale horizontally.

If you don’t take care of the scaling behaviour, the elements will run „out of place“, when resizing the browser window.

One more problem are overlapping element or elements, which are placed completely onto other elements. The reason for issues, which are caused by this (and a solution) you can find here: https://forums.adobe.com/docs/DOC-9082

Additionally:

  • You shouldn’t inspect your page not only breakpoint-wise, but use the scrubber (this grey handle to the right of the breakpoint bar to control, how elements are floating.
  • Situations with images to the left and text to the right of the image are much simpler solvable, if you use inline images: Copy the imag just like a word into the text frame and use the „Wrap“ panel to control the settings.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 19, 2018 1
New Here ,
Jun 19, 2018

Copy link to clipboard

Copied

Oh! That sounds bad, I'm new at muse. So exploring how it works.

Thank you for your points and try to fix the issues. Basically the element are the issue all together? Not just one?

Yeah.. seems a bit confusing now for me, but thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 19, 2018 0
LEGEND ,
Jun 19, 2018

Copy link to clipboard

Copied

It IS confusing. Why?

On a responsive page every element influences the others: Push them down, lift them up, … Images scale down, when resizing the browser window, object below images slide upwards in this case. It is really heavy to control all page elements, so that they work perfectly.

If you are new to Muse, why

  • trying to create a responsive site first? I’d start to learn Muse by building a fixed width site. In this case, you can layout as you would do in print layout.
  • why trying to add 3rd party widget (for example the „Search“ widget), before creating the basic Muse site first. 3rd party widget often cause issues.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 19, 2018 0
New Here ,
Jun 19, 2018

Copy link to clipboard

Copied

I found why it was floating, it was in navigation.

I will experiment with the rest of the objects. thank you for the tips, they were useful and will help improve my work.

I need responsive site for the client, that is why I am making it.

Thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 19, 2018 0