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

My website layout changes when viewing the preview on iMac 27" and Macbook 15"

New Here ,
Jan 20, 2019 Jan 20, 2019

Copy link to clipboard

Copied

Help Help!

Is there anybody out there that still uses Muse!?

Ive been working on a portfolio esc website for some time now(building it on my 27"iMac), i've created the different versions for desktop, tablet and mobile, everything runs smoothly. I was getting close to being able to publish the website and make it live, ready to send out to potential clients when I suddenly thought, "hang on, lets try to open the preview on my 15" Macbook Pro to make sure everything still looks perfect on a different sized monitor". Now I don't know if i'm just being stupid and i've missed something very simple but for some reason the layout of each page is appearing different. I'll try to break down how each page should be vs how it appears on the Macbook...

Home Page viewed on 27" iMac:

The page is set to a fixed width - it is very minimalistic and designed to be a static page with no scroll. I have used a background graphic designed in Photoshop to act as the browser fill. This is essentially a colour gradient with the site title in the centre of the page. I have tried fitting options 'original size and scale to fill' both appear fine when viewing on the iMac. The image is also locked to the centre. I then have several navigation buttons in the top corners of the page. Everything is perfect and works how its intended.

Screenshot 2019-01-20 at 12.50.30.png

Home Page viewed on 15" Macbook Pro:

The page is set to a fixed width and all of the browser fill options are set to the same I mentioned above. However when I view the preview the browser fill image is different (the title text in the image is lower than it should appear) and the website is no longer static, it allows me to scroll to see the rest of the image. The navigation buttons in the top corner are all perfect and working fine. Why all of a sudden has the website turned into a scroller and the browser fill image changed. I have tried changing the fitting preferences multiple time but I keep having the same issue. I assume it must be to do with the size of the image but if I change it then wont that also affect the layout of the iMac version?

50695501_525321904619563_6906193457895702528_n.png

Portfolio page viewed on 27" iMac:

Like the Home page it is set to a fixed width and has a very minimalistic design. I have used a similar browser fill, only this time It's just an image of the colour gradient and doesn't contain the site title in the centre of the page. The page still contains several of the navigation buttons at the top of the page. The main contents of the page is the portfolio work itself, which is 12 videos, they appear as thumbnails that when clicked activate a tooltip widget popup containing the video. Everything works fine on the iMac preview. Again the page does not scroll.

Screenshot 2019-01-20 at 12.50.45.png

Portfolio page viewed on 15" Macbook Pro:

The page is still set to a fixed width and the browser fill options are set to the same as above - surprisingly the browser fill doesn't seem to have caused any issues this time around as its just a colour gradient so there is no noticeable difference and the website is still static, it hasn't developed a scroll - GREAT! However the 12 video thumbnails that were nicely spread out across the page are now huge and only 4 thumbnails are appearing on the screen in full and only showing the edges of the other 8 videos. Strangely I cant scroll to see the full images.

50521817_2317786505117319_6393986709125595136_n.png

I apologise if this is a simple fix, i'm not the most code savy person, muse has been a perfect way for me to create without having to get down and dirty with the code, but its small problems like this that keep throwing me off. If there is anyone out there still using muse or someone thats had a similar problem, I would really appreciate your help!

Thanks!

Views

267

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 , Jan 20, 2019 Jan 20, 2019

Your issue looks like a "simple" responsive issue. Your website does not seem to be responsive, means: is not set up to look well/as desired on different screen sizes.

Did you set up any breakpoints for your website?

BTW, there are quite a lot of Musers out there so don`t panic.

Kind Regards,

Uwe

Votes

Translate

Translate
LEGEND ,
Jan 20, 2019 Jan 20, 2019

Copy link to clipboard

Copied

Your issue looks like a "simple" responsive issue. Your website does not seem to be responsive, means: is not set up to look well/as desired on different screen sizes.

Did you set up any breakpoints for your website?

BTW, there are quite a lot of Musers out there so don`t panic.

Kind Regards,

Uwe

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 ,
Jan 20, 2019 Jan 20, 2019

Copy link to clipboard

Copied

LATEST

Thanks for a speedy reply! Im so glad there are still people out there using muse!

I have turned off the scrolling option in the browser fill which seems to have semi fixed that issue however there are still some elements moving around the page and the portfolio page is still crazy.

I don't currently have any breakpoints set up. Ive just watched a detailed video on them so I'll give it a go and see if it resolves my problem.

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