Expanding Pages to 100% width

  • Hello,

    I’m attempting to create pages with width:100% properties according to this design: https://livingroomatl.org/wp-content/uploads/2015/07/EBA-Page.jpg The

    Each color (i.e., the yellow, green, and blue seen in the link) would presumably be its own page then put together on the parent page using page builder (at least, that’s how I’m going at it).

    I’ve attempted to expand them 100% using the Simple Custom CSS plugin, the custom css panel through the theme’s settings, and the widget CSS attribute in page builder, but all to no avail.

    I might be overlooking something obvious here. What would you suggest?

    Thanks!
    -Team Living Room

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author shufflehound

    (@shufflehound)

    Hello,

    This could be achievable by using Text widgets, where you could create custom HTML structure with some text and add some CSS styles.

    Thread Starter LivingRoomATL

    (@livingroomatl)

    Hi,

    The div has been created with custom HTML and CSS (below), but the issue we’re having is overwriting the page’s container width from the template for this specific div.

    <style>
#lion-container {
    background-color: #f8b932;
    width:100%;
    height:112%;
}

#lion-header {
   text-align: left;
   font: bold 50px Verdana, Geneva, sans-serif;
   color: black;
   position:relative;
   top: 2em;
   left: 35%;

}

.lion-img img:first-child {
    height: auto;
    width: auto;
    max-width: 500px;
    max-height: 500px;
   position: relative;
   top: -94px;
}

#lion-info {
   font: 18px Verdana, Geneva, sans-serif;
   color: #000000;
   width: 50%;
   height: auto;
   position: relative;
   left: 35%;
   top: -20em; 

}

</style>

<! === PAGE ===!>

<div id="lion-container">
<h1 id="lion-header">The Call to Courage Award </h1>

<div id="lion-img" class="lion-img">
<img src="https://livingroomatl.org/wp-content/uploads/2015/07/lion2-02.png" >
</div>

<div id="lion-info">
This individual demonstrates a willingness to challenge the status quo and the fortitude to lead others when times are most uncertain. In situations that would turn away a less committed person, they persevere, showing extraordinary drive and exemplary conduct so that others may be inspired and follow in their footsteps. Tackling an issue like homelessness can be daunting, but with these courageous individuals in our midst, we are better equipped to do the work that makes Living Room so beneficial to so many in our community.
</div>

</div>
    Theme Author shufflehound

    (@shufflehound)

    Hello,

    Have you tried to change page template to the Front page?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Expanding Pages to 100% width’ is closed to new replies.