Highlighted

Container Not Expanding with responsive content

New Here ,
Apr 02, 2018

Copy link to clipboard

Copied

When I resize the window, the text content rewraps, but the containing rectangles don't completely resize vertically to cover the height of the background of the text.  What can I do to make sure that the background keeps expanding for the narrow screen sizes

I also have trouble with my anchors not moving down with the page content so they're misaligned when i click on an anchor link in mobile

One example in the project below is the "reviews" section

here's the link to my project

Mago:Talent - Entertainer CRM

You should fill a text frame, containing the complete text from „The reviews …“ to „Andy Larmouth, England“ with a background image or, as I did in my example, place a rectangle, filled with the image, behind the text.

In your file you are using an empty text frame with a background image. This element of course won’t expand, if there is another text frame in front.

Look at this example file:

https://www.dropbox.com/s/tfi0ni4tn6sdcnm/Mago%20Website2_Mod.muse?dl=0

Views

368

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

Container Not Expanding with responsive content

New Here ,
Apr 02, 2018

Copy link to clipboard

Copied

When I resize the window, the text content rewraps, but the containing rectangles don't completely resize vertically to cover the height of the background of the text.  What can I do to make sure that the background keeps expanding for the narrow screen sizes

I also have trouble with my anchors not moving down with the page content so they're misaligned when i click on an anchor link in mobile

One example in the project below is the "reviews" section

here's the link to my project

Mago:Talent - Entertainer CRM

You should fill a text frame, containing the complete text from „The reviews …“ to „Andy Larmouth, England“ with a background image or, as I did in my example, place a rectangle, filled with the image, behind the text.

In your file you are using an empty text frame with a background image. This element of course won’t expand, if there is another text frame in front.

Look at this example file:

https://www.dropbox.com/s/tfi0ni4tn6sdcnm/Mago%20Website2_Mod.muse?dl=0

Views

369

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
Apr 02, 2018 0
Apr 03, 2018

Copy link to clipboard

Copied

Hey scotnery,

I have tried the same at my end and was able to achieve it by setting the text box as "responsive-width" and background image as "stretch to browser width".

Let me know if that works for you as well.

Regards,

Ankush

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...
Apr 03, 2018 0
New Here ,
Apr 03, 2018

Copy link to clipboard

Copied

This is how it's already set. if you look at the link that I posted, you can see that it's obviously a browser width container with a responsive width text in the reviews section.

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...
Apr 03, 2018 0
Apr 04, 2018

Copy link to clipboard

Copied

Can you please compose these objects in a new file and share it with me so I can have a closer look?

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...
Apr 04, 2018 0
New Here ,
Apr 04, 2018

Copy link to clipboard

Copied

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...
Apr 04, 2018 0
Apr 05, 2018

Copy link to clipboard

Copied

Hey,

It's been observed that you have filled in the image in a text frame and placed the "reviews" text on top of it.

Please use a normal image frame instead and it should work fine.

Let me know how it goes.

Regards,

Ankush

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...
Apr 05, 2018 0
New Here ,
Apr 05, 2018

Copy link to clipboard

Copied

this is not Fun! 

your tip did not work. I changed it and uploaded a new file ... linked below I would love it if it worked

Can an image frame even be resized as "Stretch to browser width?"

http://www.jumpingovation.com/out/Mago%20Website2.museb.zip

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...
Apr 05, 2018 0
Adobe Community Professional ,
Apr 05, 2018

Copy link to clipboard

Copied

Change those double arrows to "look" outside instead of inside.

Bildschirmfoto 2018-04-05 um 20.56.27.png

Then the images, set to resize in width and height fill the entire screen. If that`s your issue.

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...
Apr 05, 2018 0
New Here ,
Apr 05, 2018

Copy link to clipboard

Copied

thanks, nope

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...
Apr 05, 2018 0
LEGEND ,
Apr 05, 2018

Copy link to clipboard

Copied

Nope – what?

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...
Apr 05, 2018 0
New Here ,
Apr 05, 2018

Copy link to clipboard

Copied

@fotoroeder 's tip had nothing to do with my issue

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...
Apr 05, 2018 0
LEGEND ,
Apr 06, 2018

Copy link to clipboard

Copied

Really? You asked: "Can an image frame even be resized as "Stretch to browser width?“

The answer is absolutely correct.

So it would be helpful, to tell us a little bit more than just „Nope“.

Your other issues:

  • Anchors:
    • Of course your anchors become „misaligned“. They are placed at a fixed position, but your page grows/shrinks dynamically when the screen size is changed.
    • Solution: Place the anchors into the „Page stream“ by copying them into an (empty) text frame, which is stretched page-wide. These text frames flow together with your other page element and adapt the position of your anchor dynamically.
  • Background images don’t expand when text frames are growing vertically:
    • In your „Review“ example (your first .muse file), the background frame is an image. Images scale proportionally. So logically they can’t only grow in vertical direction
    • One solution of many:
      • Stretch your text frame to page/browser width, just as you like.
      • Don’t place an image, but „fill" the text frame with your image.
      • Adjust the text content by using for example the „Spacing“ panel and/or the „Text panel.
      • Alternative: Use a filled rectangle instead of a background image.
  • In your second .muse file, you have replaced the image by a rectangle, but it obviously doesn’t work as expected. Probably your background rectangle is internally corrupted. Place a new rectangle, fill it with your image, and all works fine.

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...
Apr 06, 2018 1
New Here ,
Apr 07, 2018

Copy link to clipboard

Copied

@Günter , thank you for the thorough reply. 

my anchors are now moving with the page content in the flow.

The "One solution of many:" Does not appear to be the solution and i'm not sure how it's different from what I had originally in my first muse file. 

here's my current muse file

http://www.jumpingovation.com/out/Mago%20Website2.musec.zip

any chance any of you could actually make this work hands-on beyond the theory of how the app SHOULD work? Or maybe explain to me what I'm misunderstanding?

thank you for all your time

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...
Apr 07, 2018 0
LEGEND ,
Apr 07, 2018

Copy link to clipboard

Copied

You should fill a text frame, containing the complete text from „The reviews …“ to „Andy Larmouth, England“ with a background image or, as I did in my example, place a rectangle, filled with the image, behind the text.

In your file you are using an empty text frame with a background image. This element of course won’t expand, if there is another text frame in front.

Look at this example file:

https://www.dropbox.com/s/tfi0ni4tn6sdcnm/Mago%20Website2_Mod.muse?dl=0

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...
Apr 07, 2018 0
scotnery LATEST
New Here ,
Apr 08, 2018

Copy link to clipboard

Copied

oh geeze! thank you   thank you everyone for taking the time  

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...
Apr 08, 2018 0