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

Responsive To Left or Right?

Community Beginner ,
Dec 21, 2018 Dec 21, 2018

Copy link to clipboard

Copied

Hi all,

I currently have two rectangles on my page, which I would like to make responsive to the side of the browser.

Rectangle on the left to be responsive and stretch to the left of the browser, rectangle on the right to be responsive and stretch to the right of the browser.

I've added a photo for you to understand what I'm currently looking at:

snapshot.PNG

When I select the grey square and set that to stretch, it's stretching to the entire width of the browser.

All help will be greatly appreciated.

Thank you.

Views

389

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 Expert ,
Dec 21, 2018 Dec 21, 2018

Copy link to clipboard

Copied

This is shockingly simple to do with CSS Flexbox.  Unfortunately, Muse does not allow you to use Flexbox -- just one more reason why Muse is an irrelevant tool for modern web designers.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>CSS Flexbox</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>

.container {display: flex;}

.col {padding: 5%}

.light {background:#DDD;}

.dark {background:#222; color:#FFF}

/* Special Rules for mobiles */

@media only screen and (max-width: 768px) {

.container {flex-wrap:wrap}

}

</style>

</head>

<body>

<div class="container">

<div class="col light">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt atque ad beatae blanditiis, quod numquam dicta soluta voluptates, rerum eum velit dolor quisquam dolore, placeat dolorum asperiores unde dignissimos nulla.</p>

</div>

<div class="col dark">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt atque ad beatae blanditiis, quod numquam dicta soluta voluptates, rerum eum velit dolor quisquam dolore, placeat dolorum asperiores unde dignissimos nulla.</p>

</div>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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 ,
Dec 21, 2018 Dec 21, 2018

Copy link to clipboard

Copied

I agree Flexbox has issues but that is because of the code itself and nothing to do with Adobe... you can use it in Muse if you want to mate,

just drop your entire code into a 'insert html' box

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 ,
Dec 21, 2018 Dec 21, 2018

Copy link to clipboard

Copied

imo your design is wrong for websites and the underpinning issue here is 'text in a box' does not fit what you think "responsive to the side of the browser"

what happens when that text box is too small to fit the text inside it?

Flexbox will adjust the everything to make it fit... sometimes that makes your design look odd

Muse can have the text jump out of the box (green) or stay inside the box and hide some of the text (black)

of course if you don't really need text then no problem... use an image or some svg file instead

mock up = Flexbox code inside html box, + basic Muse Div and text box... you pick which works best for your design and get back to us

example; Flexbox

Screenshot (1770).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 ,
Dec 22, 2018 Dec 22, 2018

Copy link to clipboard

Copied

If you don’t want to follow Nancy’s „shockingly simple“ way of building these elements (installing a new application, learning the application, learning code, and, and, and), just try the really "hard and time consuming Muse way“. This will work in most situations and takes you about 2 minutes without writing a single line of code:

Here the sample .muse file: https://www.dropbox.com/s/2j5jyxqphmz9uzs/Responsive_Rectangles.muse?dl=0

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 ,
Dec 22, 2018 Dec 22, 2018

Copy link to clipboard

Copied

LATEST

yes thanks Günter i forgot one, you can have the box get bigger to hold all the text... the issue then is what happens to things under the box i.e, does it cover them or push everything down the page & does it need to work different on desktop or phones?

these are design questions and a web designer has to look at each option +|- then pick the tool that works best in each case... that could be Muse, wrapper or pingrow & how flexbox, php or bootstrap go inside all of them

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