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

Allow text to disappear in text box

Community Beginner ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

Hi there,

I have a square text box starting from the left of my page to the centre with text in it, next to the box I have an image from the centre of my page to the right of my page. The problem I'm having is that when i adjust my screen size with the scrubber the image obviously responds as it should but the text stays the same size and pushes the textbox down my page (it gets longer in height).

My question is: How do I stop the text from pushing the box downwards but have the box's width get smaller so it still behaves in a responsive manner?

I am happy for the text to start disappearing, I just don't want the height to change as I have the same setup underneath this that is being pushed further down and has the safe effect.

Is this even possible?

Views

250

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 , Feb 12, 2018 Feb 12, 2018

Yes, this is possible, but a little bit tricky:

What is not possible: To „crop“ text to its container, so that it disappears at the bottom, but look at this little screencast:

How is it done?

You can tell Muse, which element should push up/down which other element, by grouping the „initial“ element and the „following“ element. In this case – roughly spoken – I placed two „guiding frames“ (= empty image frames), which  initiate the „pushdown“ action, and grouped them with the „real" images. So the „

...

Votes

Translate

Translate
LEGEND ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

Could you give us a screenshot of the exact situation with guidelines and frame borders set to „visible“.

A screenshot is necessary, because the meaning of words like „next to“ is crucial in this case.

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 ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

This is the 'normal' size. Bottom right of the top image just touches the top left of the bottom image.

Screen Shot 2018-02-12 at 18.37.28.png

As soon as I scale down the size of the page the textbox gets longer and the images no longer meet...

Screen Shot 2018-02-12 at 18.37.59.png

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 ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

Yes, this is possible, but a little bit tricky:

What is not possible: To „crop“ text to its container, so that it disappears at the bottom, but look at this little screencast:

How is it done?

You can tell Muse, which element should push up/down which other element, by grouping the „initial“ element and the „following“ element. In this case – roughly spoken – I placed two „guiding frames“ (= empty image frames), which  initiate the „pushdown“ action, and grouped them with the „real" images. So the „guiding frame“ pushes down the image, and the text container isn’t respected at all. Stacking the elements in a reasonable way, the text flows behind the images.

The rest may be done by using breakpoints and resize or shorten the text.

Here you find the sample .muse file, used in the screencast above:

https://www.dropbox.com/s/w88d7wax3ghecg1/janbrag.muse?dl=0

What is possible too:

  • Use a widget, which allows scaling text, like this one: https://www.muse-themes.com/products/scaling-text​ (there are other widgets out there, but I only have used this one.)
  • Dont use „real“ text, but place an image (preferably SVG), containing the text. This would be much simpler.

Questions? Just ask!

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 ,
Feb 12, 2018 Feb 12, 2018

Copy link to clipboard

Copied

LATEST

Thank you! This was really helpful. Just what I needed. Thanks again Günter.

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