Highlighted

Stretch an image from center to side of browser.

Community Beginner ,
Jan 16, 2018

Copy link to clipboard

Copied

Example site: Bicycle Store | WIX

On this template I am wondering how to create images that stretch to the side of the browser from the center in muse. If you scroll down on the example site I am talking about the 'about me' and 'cycle with style' sections. I am trying to do this in a fixed width design so I can use scroll effects. Thanks.

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

If you want to have it soon, use WIX .

Best (and only) way, I'm afraid, if you use fluid width breakpoints like here:  homepage

You have to decide wether the scroll motion or the centered behaviour is more important.

Reason: As soon as you set the image to behave "stretched to browser width" , the border of the image isn't centered anymore.

If you want to set the image / the frame with the filled in image to react responsive it bleeds outside the canvas ( using fixed width breakpoint).

Best Regards,

Uwe

Views

417

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

Stretch an image from center to side of browser.

Community Beginner ,
Jan 16, 2018

Copy link to clipboard

Copied

Example site: Bicycle Store | WIX

On this template I am wondering how to create images that stretch to the side of the browser from the center in muse. If you scroll down on the example site I am talking about the 'about me' and 'cycle with style' sections. I am trying to do this in a fixed width design so I can use scroll effects. Thanks.

Adobe Community Professional
Correct answer by fotoroeder | Adobe Community Professional

If you want to have it soon, use WIX .

Best (and only) way, I'm afraid, if you use fluid width breakpoints like here:  homepage

You have to decide wether the scroll motion or the centered behaviour is more important.

Reason: As soon as you set the image to behave "stretched to browser width" , the border of the image isn't centered anymore.

If you want to set the image / the frame with the filled in image to react responsive it bleeds outside the canvas ( using fixed width breakpoint).

Best Regards,

Uwe

Views

418

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
Jan 16, 2018 0
LEGEND ,
Jan 16, 2018

Copy link to clipboard

Copied

If I understand correctly, you want an image stretched to browser width on a fixed width page.

Since images can‘t be stretched browser wide (only page wide), you have to choose a different approach:

  • Place a simple rectangle (not the crossed out one!), and stretch it to browser width, using the „Resize“ button in Muse‘s upper control strip.
  • Then click onto “Fill“ in Muse‘s control strip, fill the rectangle with an image, and configure it as you like (position, filling behaviour, …)

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...
Jan 16, 2018 0
Community Beginner ,
Jan 16, 2018

Copy link to clipboard

Copied

Whenever I choose 'stretch to browser width' it will overtake the rectangle i have next to it with all my text. I can't get ti to behave exactly like the example site when I resize the window. I am probably doing a bad job at explaining what i am trying to do. Hope this helps.

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...
Jan 16, 2018 0
LEGEND ,
Jan 16, 2018

Copy link to clipboard

Copied

Don‘t understand, what you mean. Could you give us a screenshot or a link (you can publish a free temporary test site on businessctalyst using the „Publish“ menu top right in Muse’s application window), or a very(!) small .muse file to demonstrate your issue? In the last case, please follow these instructions: https://forums.adobe.com/docs/DOC-8652

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...
Jan 16, 2018 0
Community Beginner ,
Jan 16, 2018

Copy link to clipboard

Copied

I am trying to get my pictures to behave exactly like the pictures on the example site. when i click stretch to browser width it stretches the entire picture instead of just stretching it to one side or the other. I will try to get something uploaded soon.

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...
Jan 16, 2018 0
Adobe Community Professional ,
Jan 16, 2018

Copy link to clipboard

Copied

If you want to have it soon, use WIX .

Best (and only) way, I'm afraid, if you use fluid width breakpoints like here:  homepage

You have to decide wether the scroll motion or the centered behaviour is more important.

Reason: As soon as you set the image to behave "stretched to browser width" , the border of the image isn't centered anymore.

If you want to set the image / the frame with the filled in image to react responsive it bleeds outside the canvas ( using fixed width breakpoint).

Best Regards,

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...
Jan 16, 2018 1
LEGEND ,
Jan 17, 2018

Copy link to clipboard

Copied

The sample wix site is very poor. Doesn’t work properly on mobike devices, doesn’t show up on iPads.

Additionally it works with tons of breakpoints, making the page display very jumpy.

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...
Jan 17, 2018 0