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

image browser width - in one direction only

New Here ,
Nov 02, 2016 Nov 02, 2016

Copy link to clipboard

Copied

I'm new to Muse and I'm basically trying to create a responsive site with the look of a two column site. At the top I want an image to stretch to browser width but only to the left - and on the right of the image is a coloured box that should stretch the browser width to the right....but I don't want to click on the double arrows in the top ruler because I don't want the entire site to stretch browser width. Hope that makes sense to someone.

any suggestions?

D

Views

169

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

Guide , Nov 02, 2016 Nov 02, 2016

1) Place two rectangles.

2) Create two graphic styles:

- for the left rectangle with name objectpos

- for the right rectangle with name objectpos2

3) Paste the following code in page properties

<style type="text/css">

.objectpos {

position: absolute !important;

left: 0px !important;

width: 50% !important;

}

.objectpos2 {

position: absolute !important;

right: 0px !important;

margin-left: 0px !important;

margin-right: auto !important;

left: auto !important;

width: 50% !important;

}

</style>

a0a4ecb768.png

4) Place another tr

...

Votes

Translate

Translate
Guide ,
Nov 02, 2016 Nov 02, 2016

Copy link to clipboard

Copied

1) Place two rectangles.

2) Create two graphic styles:

- for the left rectangle with name objectpos

- for the right rectangle with name objectpos2

3) Paste the following code in page properties

<style type="text/css">

.objectpos {

position: absolute !important;

left: 0px !important;

width: 50% !important;

}

.objectpos2 {

position: absolute !important;

right: 0px !important;

margin-left: 0px !important;

margin-right: auto !important;

left: auto !important;

width: 50% !important;

}

</style>

a0a4ecb768.png

4) Place another transparent rectangle 100x40px

e99d52fc6c.png

5) Enjoy

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
New Here ,
Nov 02, 2016 Nov 02, 2016

Copy link to clipboard

Copied

LATEST

Thanks...I didn't realize there was a spot to add your own code. Still lots to learn. Thanks!

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