• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Website elements are floating in browser

New Here ,
Jun 19, 2018 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!

Views

513

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
community guidelines

correct answers 1 Correct answer

LEGEND , Jun 19, 2018 Jun 19, 2018

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 par
...

Votes

Translate

Translate
LEGEND ,
Jun 19, 2018 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.

Votes

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
community guidelines
New Here ,
Jun 19, 2018 Jun 19, 2018

Copy link to clipboard

Copied

Thank you!

Here is the dropbox link with muse file.

problem_web

Votes

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
community guidelines
LEGEND ,
Jun 19, 2018 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.

Votes

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
community guidelines
New Here ,
Jun 19, 2018 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.

Votes

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
community guidelines
LEGEND ,
Jun 19, 2018 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.

Votes

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
community guidelines
New Here ,
Jun 19, 2018 Jun 19, 2018

Copy link to clipboard

Copied

LATEST

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!

Votes

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
community guidelines