[Resolved] Page Width & Static Carousel

[Bruce Porter]

I have two questions for you that I am trying to accomplish with a new client site. The first thing has to do with page width. I noticed that the max width is 1500 for full width. The problem I have with that, is on a 24 inch screen or higher, there is no way to get the site to display at true full width.

I am trying to model the exact styling of this page. http://starwoodenergygroup.com/business/

The site I am building has a dev link you can find at this url: http://b01.f6c.myftpupload.com/firm/

You will not see the problem I am having unless you are viewing the site from a screen of 22/24 inches or higher. I need to be able to get the carousel on the right side column to fill the entire space and remain static at the same time. Meaning when I scroll down the page, the image will remain stationery in place. The second part to this is to be able to select a menu item from the navigation on the left and have it auto scroll to the article in the middle associated with that menu item. However, I would first like to solve the issue with the carousel item. I need it to stay in place when the page is scrolled. I also need it to be responsive and it should be the first element on the page on a mobile device and the remaining columns should fall beneath it.

I would really appreciate your help in resolving this. I have built the last three client sites using your theme and it’s the best. I usually have zero issues with accomplishing a client request and customization but this one is a little more difficult for me to figure out. Thanks again.

[Tom]

Hi there,

The carousel on the right side is using javascript to set the height to the size of the browser, no matter the screen size. The parent container of the carousel is position:fixed, which keeps it stationary on the page as you scroll.

To set the container width to a larger width, you can add your own custom CSS:

body .grid-container {
   max-width: 2000px;
}

For it to be the first item on responsive, you’ll need to make use of the push and pull classes provided with the CSS framework in the theme: http://unsemantic.com/css-documentation#6-push-amp-pull-classes

Hopefully this is enough to get you going 🙂

[Author]

Posts