I want to change the page width while using the theme Brooklyn.  
  
So by default, the page width is set to 1050 px. I have changed that to 1300 px by editing the code. But this width is universal and applies to all pages.  
But, I want it to be 1300 px for the homepage and 1600px for the product detail page.   
How do I achieve this?





 
 Solved!
 
 [Go to the solution](/c/Shopify-Design/Shopify-theme-Brooklyn-Change-width-in-Product-description-page/m-p/811193#M204144)
[@aritra](/c/user/viewprofilepage/user-id/717011) 

1. Go to Online Store->Theme->Edit code  
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.


```
.template-product .wrapper {
    max-width: 1600px;
}
```
 



 Thanks,  
Ittanta Technologies Pvt. Ltd. | Shopify Expert  
If reply is helpful, please **Like and Accept Solution.**  
To hire us, contact us at **info@ittanta.com**
hi there,

you should set every “height” to “auto”.

the “height” in your designer tool isn’t the same as a mobile phone. your elements in the blocks with a set height are probably bigger than the set height you used.

hope this works!

cheers,

max zijlstra hey [@rapha](/u/rapha) , could you try these changes on your mobile mode? this suggestion stems from the fact that your cart takes up the whole height and is really narrow.

[[image]](https://aws1.discourse-cdn.com/business5/uploads/webflow1/original/3x/c/1/c183e24cd6648f19454eddfe3bf89087e1edfa29.png "image")

the result i get is the following:

[[image]](https://aws1.discourse-cdn.com/business5/uploads/webflow1/original/3x/3/3/338e06df505307c5fdd1c817a2ba847bf9848d88.jpeg "image")

the height of the cart in px is not recommended personally, i would use either % v… hi,

here is to make the box shorter:

.panel-widget-style-for-92-0-0-0 .featured-item {

height: 150px;

}

did you mean that you want to add a scroll inside the client container? if yes, you can add this code below:

div#pl-92 {

max-height: 500px;

overflow: auto;

}

add the code in above… When designing for a variety of resolutions you want to scale down, not up. Do your design in a @2x resolution (640 x 960 @72ppi) and for the @1x assets you duplicate them to a new document (preferably) and scale them down by 50%. You can set up a Action script for this also to make the process go by faster. To learn a bit about Photoshop action script you can have a look [HERE](https://www.youtube.com/watch?v=BRpPGiGXcHc).


As for your second question, [HERE YOU GO](https://www.dropbox.com/s/sczltvow7jgtfiy/iPhone%204%20GUI%20PSD%20Retina%20Display.psd). The "reload" symbol you were after can be found in that Retina asset sheet, a sheet that is very good to have for anyone who wants to design for iPhone. double click in the figure to bring up the property inspector. make sure the units property is "pixels". then in the position property (expand it to see width and height), type in 900 for the width, and 100 for the height. if that still doesn't work, make sure the resize property is set to "on". * Use RelativeLayout instead of LinearLayout
* Instead of using your gradient as the background of the main layout container, add a child view, set the height explicitly to the size you want (230dp), and set the background of that view to your gradient.



  




 (adsbygoogle = window.adsbygoogle || []).push({}); okay, so here’s what i created to “fix” the readability.

in the window paint event add this code for each control you wish to see better.

if color.isdarkmode and lightskin then

var r as double = popupmenu1.height-20 // just in case the height got larger than 20 (macos default)

g.drawingcolor =… hello, thank you for the screenshot.

you can change that color in dashboard → appearance → customize → colors section, header text option.

please feel free to ask any other questions that you might have.

kind regards, roman. Hi, I guess it depends on your layout. Of you're using CSS then you need to set the left and right margin of your main container to auto. Please check example below.

HTML:

<div id="main"> test</div>

CSS: 

#main {

margin-right: auto;

margin-left: auto;

}

If you need to have a visual example for this, try opening a new HTML document using a CSS layout, you can do that by going to file>new>blank page> then select a CSS Layout for HTML.

I hope this post makes sense to you. 😉 You are using position:absolute; Don't, it usually leads to endless problems.



Even if you had a real need to use it, why are you placing things at left 1400px!!!



This is right on the edge of the average monitor - how large is your monitor? I work with my browser open at a width of about 1000-1200px (note I didn't mention the size of my monitor). The main reason people have big monitors is so they can have two windows open next to each other, not so that they can run a browser window open at 2800px wide.



I suggest you start by looking at ordinary websites and studying the css. you'll discover that many sites use a wrapper div with a fixed width, while others use a wrapper div with a percentage width and a max-width, to prevent ending up with a huge long line of text 2500px long for example. Then they center the div using margin:auto. That gets the content in the middle of the page on the vast majority of screens, and browser viewports.



Don't lay out a screen using position:absolute. You are not painting pretty pictures on a screen, you should be using html and css to control the layout and check how the layout looks every time, by resizing the window looking for errors.



Also, a contact form needs the input boxes to be part of a <form>, so you'll have to read up on how they work. And a form needs an action, so you'll have to learn a bit about scripting, probably php.