# Responsive Layout

**URL:** <https://forums.fusetools.com/t/responsive-layout/1958>\
**Category:** How-to Discussions\
**Created:** [September 11, 2016, 2:28pm UTC](https://forums.fusetools.com/t/responsive-layout/1958 "2016-09-11T14:28:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fotis](https://avatars.discourse-cdn.com/v4/letter/f/4af34b/32.png) [@Fotis](https://forums.fusetools.com/u/Fotis)\
**Post date:** [September 11, 2016, 2:28pm UTC](https://forums.fusetools.com/t/responsive-layout/1958/1 "2016-09-11T14:28:31Z")

</div>

Hello,

In out app we have an info section for our movie Cards, but the space is limited and on small screens we have problem with scaling. The code is :

```auto
<Panel ux:Name="bottomPanel" Width="80%" MaxWidth="550" Height="80%" Opacity="0">
      	<Rectangle Layer="Background" Color="White" CornerRadius="5" />
      	<Scaling ux:Name="bottomPanelScaling" Y="0.8" X="0.85" />

		<StackPanel Alignment="Bottom" ContentAlignment="Top" Height="25%" Margin="5" ItemSpacing="5">
			<!-- TODO Bad Scalling -->
			<Grid Columns="8*,2*">
				<Text Value="{shorterTitle}" Font="appFont" FontSize="20" TextWrapping="Wrap" Column="0" TextColor="#000" TextAlignment="Left" Margin="3,0,0,0" />
				<Grid Columns="auto,auto" >
                    <Image File="icons/duration.png" Height="17" Width="17" Color="Black" Alignment="Center"/>
                    <Text Value="{runtime}" Font="appFont" FontSize="14" Column="1" TextColor="#000" Opacity="0.7" Margin="3,4,0,0" Alignment="Center"/>
                </Grid>
			</Grid>

			<Grid Columns="7*,3*">
    			<Text Value="{lessGenres}" Column="0" Font="appFont" FontSize="12" TextWrapping="Wrap" TextColor="#000" TextAlignment="Left" Opacity="0.6" Margin="3,0,0,0" />
				<Rectangle Width="100%" Height="20" Column="1">
					<Panel Height="20" Alignment="Left">
						<Image File="icons/Stars2.png" Height="20"/>
						<Rectangle Width="{starWidth}" Height="18" Color="#ffb700" Alignment="Left"/>
					</Panel>
					<Image File="icons/Stars.png" Height="20"/>
				</Rectangle>
            </Grid>
			<Grid Rows="auto,auto" Columns="auto,auto" Alignment="Bottom" Margin="3,0,0,0">
				<Text Value="Director: " Font="appFont" FontSize="14" Row="0" Column="0" TextColor="#000" Alignment="Left" Margin="0,0,0,0" />
				<Text Value="{directors}" Font="appFont" FontSize="14" Row="0" Column="1" TextColor="#000" Opacity="0.7" TextAlignment="Center" Alignment="CenterLeft" Margin="3,0,0,0" />
				<Text Value="Starring: " Font="appFont" FontSize="14" Row="1" Column="0" TextColor="#000" TextAlignment="Center" Alignment="Left" Margin="0,0,0,0" />
				<Text Value="{cast}" Font="appFont" FontSize="14" Row="1" Column="1" TextColor="#000" Opacity="0.7" TextAlignment="Center" Alignment="CenterLeft" Margin="3,0,0,0" />
			</Grid>
		</StackPanel>
      	<DropShadow />
    </Panel>

```

and the **BAD**! result is :

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/QTA1gba6vMyj-image-1473604039571.PNG)

how can we make it work across a wide range of screens ?

Thanks

---

<div class="post-metadata">

**Author:** ![Anders\_Schau\_Knatten](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_schau_knatten/32/41_2.png) [@Anders\_Schau\_Knatten](https://forums.fusetools.com/u/Anders_Schau_Knatten)\
**Post date:** [November 29, 2016, 3:29pm UTC](https://forums.fusetools.com/t/responsive-layout/1958/2 "2016-11-29T15:29:56Z")

</div>

You should probably avoid setting absolute values for height and width. See [the docs](https://www.fusetools.com/docs/fuse/controls/image) for other options available to you.