Difficulty displaying content right across a front page

[mamboze]

Hi,

On a Joomla 2.5 website using the Beez _20 template, I have a front page on a hidden menu with access to the website thru an "enter" button. This works OK, but I can't get the content - an image and text - to display completely across the page.

Checking it out with Firebug shows that the left side of the page is controlled by this bit of html <div id="nav" class="left1 leftbigger">.

Any help in resolving this problem would be much appreciated. Thanks

[itoctopus]

This can be fixed using CSS. If you can provide a direct link to that page (if it's SFW), then we might be of more help. As it is, we don't have anything to help you.

[mamboze]

I can give you the CSS and HTML for the front page, no problem.

Code: Select all

div#fp_container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
}
div#fp_logo {
    order: 0;
    flex: 1 1 auto;
    align-self: auto;
    width: 35%;
}
div#fp_logo img.fpm_image {
  width: 45%;
  height: auto;
  margin: 12% 0 0 20%;
}
div#fp_welcome  {
    order: 0;
    flex: 2.5 1 auto;
    align-self: auto;
}
div#fp_text_box {
 padding: 5% 0 5% 0 ;
}
p.fp_text_eng, p.fp_text_thai {
    text-align: center;
    color:  #000093; 
    font-weight: 500;
}
p.fp_text_eng  {
    font-size: 1.4em;
      line-height: 1.2em;
}
p.fp_text_thai   {
  font-size: 1.3em;
  line-height: 1.4em;
  font-family: arial;
}
a.fp_btn {
  margin: 7% 0 0 0;
  background-color: #004C8D;
  border-radius: 0.15em;
  border:3px solid #000093;
  display: inline-block;
  color: #FFFAAE;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.6em;
  font-weight: 500;
  line-height: 1.9em ;
  width: 22%;
  text-align:center;
  text-decoration: none;
  margin: 20% 0 10%  40%;
  }
a.fp_btn:hover {
    border: 3px solid red;
   background-color:  #DFE1F9;
	color: #0609bf;
	cursor: pointer;
}
a  span#btn_text  {
  position: relative;
 }

Code: Select all

<div id="front_page">​ 
  <div id="fp_container">
  <!--  flex container  -->
    <div id="fp_logo">
    <!-- first flex item containing the e2tw logo  -->
      <img class="fpm_image" src="/templates/beez_20/images/e2tw/e2tw_logo1.svg" />
    </div>
    <div id="fp_welcome">
    <!-- second flex item containing english and thai text and enter button  -->
    <div id="fp_text_box">
      <p class="fp_text_eng">let today be the first day of your new life </p>
      <p class="fp_text_eng">as a speaker of English</p>
      <br>
      <p class="fp_text_thai">ให้วันนี้เป็นวันแรกของชีวิตใหม่ </p>
      <p class="fp_text_thai">เพื่อการพูดภาษาอังกฤษของคุณ </p>
      </div>
      <a href="index.php/2015-07-26-06-19-07" class="fp_btn"><span id="btn_text">enter</span></a>
    </div>
  </div>
</div>

Many thanks for your interest