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

Stopping responsive design going past a set margin?

Community Beginner ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

Hello, Muse users.

I'm struggling to use responsive design the way I want to use it.

I have an image in a gallery widget and when sizing down the browsers in does what responsive design does, the only downside is that it overlaps some menus and text I have on the left-hand side that I don't want it to overlap. Is there a way to create a fixed browser margin of sorts to have the responsive design no go past that point.

Here is an example that fully illustrates what I'm attempting to do. site > Marc Baptiste.

Notice how when you scale your browser down the image doesn't go past and overlap the size menu, is this achievable in Muse?

Thank you,

Chevy.

Views

354

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 , Jul 24, 2017 Jul 24, 2017

As of this reading galleries are not responsive in muse.

I think it could be something like this in future ( I created almost the same in the prerelease with a gallery, which is helpful because the next and rev buttons are responsive as well in the latest prerelease )

Gallery-rightset

I did it with only one picture and it is necessary to use breakpoints, as well as in the prerelease.

In your example the picture also is centered in height which is not possible out of the box.

I didn`t find a way (tri

...

Votes

Translate

Translate
LEGEND ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

this design will work down to 330 width... below that gets tricky but you can download the site to see what makes it work

image

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 ,
Jul 24, 2017 Jul 24, 2017

Copy link to clipboard

Copied

As of this reading galleries are not responsive in muse.

I think it could be something like this in future ( I created almost the same in the prerelease with a gallery, which is helpful because the next and rev buttons are responsive as well in the latest prerelease )

Gallery-rightset

I did it with only one picture and it is necessary to use breakpoints, as well as in the prerelease.

In your example the picture also is centered in height which is not possible out of the box.

I didn`t find a way (tried the same as Ussnorway​, but that didn`t satisfy me at all as theres lots of space between menu and picture) to set something like a left margin to stop overlapping.

Only one way would prevent the overlapping: set the text menu to responsive width (in my first example I set it to not resize at all), but then you have to deal with the changing/moving appearance of the menu.

left-rightset-menu   I added some right padding to the menu (30):

Bildschirmfoto 2017-07-24 um 10.13.15.png

So whatever you prefer – but still galleries are not responsive except some 3rdparty galleries.

We are all waiting for responsive galleries

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
Community Beginner ,
Jul 24, 2017 Jul 24, 2017

Copy link to clipboard

Copied

LATEST

Thank you for your in-depth alternative solutions. It's good to know I wasn't missing some obvious menu setting. Seems like we still have to do some trickery to get these things to work the way we want.

Thank you for this. This solution is perfect for what I need to do. fotoroeder​Ussnorway​

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