Full Width Hero

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
Ryan White
Jr. Propeller Head
Posts: 1
Joined: Mon Jun 20, 2022 5:48 am

Full Width Hero

Post by Ryan White »

I'm struggling with getting a DIV container to have a background image or color stretch across the full width of the website. I've found several previous threads on this forum addressing the issue and have tried all those suggestions, but nothing is working. I created a test project with the Factory > Online > Top Navigation template to troubleshoot as this template has a home page that has a full width hero image.

I noted that I can copy the DIV container and paste it lower on the home page and it is full width. However, if I take that same DIV container and paste it onto a different topic page on the site, it is not full width. I tried changing the page template for that other topic page to the Home-Page.flmsp to see if there was a setting in there, but that did not change anything.

After further investigation, I noticed that the HTML tag included the class "home-topic". I verified that adding this class to any other topic page enabled full width hero images. The styles sheet contains the following:

Code: Select all

html.home-topic	/*Used on Home.htm topic for styles set only on the home topic*/
{
	
}

html.home-topic .main-section > .outer-row	/*Overrides padding set in the skin*/
{
	max-width: 100%;
	padding: 0;
}
The issue is that this makes all of the content full width! I would prefer for the non-hero content to have the max width of 62.5em that is set in the navigation skin.

Could anyone help me with how to leave the normal content on the page with the max width set in the navigation skin but be able to create DIV containers that are full width?

Thanks in advance
kmorrison
Sr. Propeller Head
Posts: 104
Joined: Mon Nov 11, 2013 3:04 pm
Location: Ottawa, Canada
Contact:

Re: Full Width Hero

Post by kmorrison »

I don't know if it's the best possible solution, but I define the max-widths in the stylesheet at the level of the elements that are expected to be children of the <body> tag, such as paragraphs, divs, headings, and tables. This way, if I want to have a different max-width for something, such as a table or graphic that really needs as much space as we can give it, it's simple to let that particular thing (or, more likely, class of things) be bigger without affecting the size of other things.

Which is to say, no, I don't know how to do what you are asking, which is why I ended up doing something different to solve the problem. But I'm interested in learning a better way if there is one.
RmdHill_Writer
Jr. Propeller Head
Posts: 8
Joined: Thu Mar 24, 2011 11:27 am

Re: Full Width Hero

Post by RmdHill_Writer »

Using the Balboa template - the settings for the home page hero image are in the style sheet, BalboaStylesForHomePage.css which is separate from the stylesheet used for the other topics.

Playing around with the various background settings on the div tag - provides inconsistent results. This has worked before if using a rectangular image. But now I want to use a rectangle with a wave at the bottom - but cannot seem to get the image to be the width of the page without losing the wave at the bottom.

div.topic-hero-cloud /*This is the first Hero/Banner on the Home Page */
{
background-color: #ffffff;
background-size: cover auto;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center 0;
height: 300px;
padding-bottom: 80px;
padding-top: 60px;
background-image: url('../Images/Assets/HeroImages/version-2022.jpg');
}

The setting, background-size has the following options: Horizontal: Auto, Cover or Contain and the same options for Vertical. I'm not sure what functionality Auto and Contain provide. In theory, Horizontal: Cover and Vertical: Auto, should give me the desired effect - but they don't seem to work as expected.
Post Reply