Highlighted

Stopping responsive design going past a set margin?

Community Beginner ,
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.

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

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

Views

259

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

Stopping responsive design going past a set margin?

Community Beginner ,
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.

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

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

Views

260

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
Jul 23, 2017 0
Most Valuable Participant ,
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

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...
Jul 23, 2017 2
Adobe Community Professional ,
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

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...
Jul 24, 2017 2
tevy LATEST
Community Beginner ,
Jul 24, 2017

Copy link to clipboard

Copied

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

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