Menu icon Foundation

Designer | Gales Ferry, CT

I am a code junkie, developer and designer. I am the owner and operator of TexoByte a small town web design, development and hosting company.

My Posts







  • 1
    Reply
  • Where to look?!

    By Lance Gundersen

    I need some help on where to look to setup this layout I sketched up. I have never placed an image (Large Image) like this before with items placed above it. I know this is vague but I am not even sure what terms to even Google! -Lance

    Last Reply by Jesus Lugo about 5 years ago


My Comments

Lance Gundersen commented on Lance Gundersen's post over 3 years

Found out what is causing the issue. The horizontal lines I am using are causing the spilling out of bounds.
 
THANK YOU ALL!

Lance Gundersen commented on Lance Gundersen's post over 3 years

Been awhile since I have been back at this project. So far no luck and I do agree that it is an element going larger than the screen I just haven't found it yet.

Lance Gundersen commented on Lance Gundersen's post over 3 years

Any ideas?

Lance Gundersen commented on Lance Gundersen's post over 3 years

Yes, the sass for the page background is:
body
background: linear-gradient(rgba($charcoal, 0.4), rgba($charcoal, 0.4)),url('/assets/img/bg.jpg') no-repeat bottom center fixed
background-size: cover
color: white
width: 100%
@include breakpoint(small down)
font-size: 16px
 
The hero section:
.hero
width: 100%
height: 95vh
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(/assets/img/hero-bg.jpg) no-repeat top center fixed
background-size: cover
//filter: blur(1.5px)
@include breakpoint(small down)
height: 100%

Lance Gundersen commented on Lance Gundersen's post over 3 years

I assume this is either a really odd, hard or dumb question since it garnered no answers!

Lance Gundersen commented on Wesley Picotte's post over 3 years

This got me too....

Lance Gundersen commented on Lance Gundersen's post almost 4 years

Thank you Rafi! This is exactly what I needed to see.

Lance Gundersen commented on Lance Gundersen's post almost 4 years

Thank you! I recognize where I went wrong now! Thanks!

Lance Gundersen commented on Lance Gundersen's post almost 4 years

Brian,

Ok so the page contents should be wrapped in the off-canvas-content div?

    <div class="off-canvas-wrapper">
      <div data-off-canvas-wrapper="" class="off-canvas-wrapper-inner">
        <div id="offCanvasRight" data-off-canvas="" data-position="right" class="off-canvas position-right">
          <div data-off-canvas-content class="off-canvas-content">
            <ul data-off-canvas class="menu vertical">
            {{#each settings.menu}}
              <li><a href="{{url}}">{{name}}</a></li>
            {{/each}}
            </ul>
          </div>
        </div>
      </div>

      <div class="title-bar hide-for-large">
        <div class="title-bar-right">
          <span class="title-bar-title">{{settings.title}}</span>
          <button type="button" data-toggle="offCanvasRight" class="menu-icon"></button>
        </div>
      </div>
      <div class="top-bar hide-for-small show-for-large">
        <div class="top-bar-left">
          <ul class="menu">
            <li class="menu-text logo">
              <p>Mikel</p>
            </li>
          </ul>
        </div>
        <div class="top-bar-right">
          <ul class="dropdown menu">
          {{#each settings.menu}}
            <li><a href="{{url}}">{{name}}</a></li>
          {{/each}}
          </ul>
        </div>
      </div>

      {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
      {{> body}}

    </div>

Lance Gundersen commented on Lance Gundersen's post almost 5 years

Thx for the reply Rafi, So currently there is no knwn fix for my current issue?

Posts Followed





Following

Followers

My Posts

My Comments

You commented on Lance Gundersen's post over 3 years

Found out what is causing the issue. The horizontal lines I am using are causing the spilling out of bounds.
 
THANK YOU ALL!

You commented on Lance Gundersen's post over 3 years

Been awhile since I have been back at this project. So far no luck and I do agree that it is an element going larger than the screen I just haven't found it yet.

You commented on Lance Gundersen's post over 3 years

Any ideas?

You commented on Lance Gundersen's post over 3 years

Yes, the sass for the page background is:
body
background: linear-gradient(rgba($charcoal, 0.4), rgba($charcoal, 0.4)),url('/assets/img/bg.jpg') no-repeat bottom center fixed
background-size: cover
color: white
width: 100%
@include breakpoint(small down)
font-size: 16px
 
The hero section:
.hero
width: 100%
height: 95vh
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(/assets/img/hero-bg.jpg) no-repeat top center fixed
background-size: cover
//filter: blur(1.5px)
@include breakpoint(small down)
height: 100%

You commented on Lance Gundersen's post over 3 years

I assume this is either a really odd, hard or dumb question since it garnered no answers!

You commented on Wesley Picotte's post over 3 years

This got me too....

You commented on Lance Gundersen's post almost 4 years

Thank you Rafi! This is exactly what I needed to see.

You commented on Lance Gundersen's post almost 4 years

Thank you! I recognize where I went wrong now! Thanks!

You commented on Lance Gundersen's post almost 4 years

Brian,

Ok so the page contents should be wrapped in the off-canvas-content div?

    <div class="off-canvas-wrapper">
      <div data-off-canvas-wrapper="" class="off-canvas-wrapper-inner">
        <div id="offCanvasRight" data-off-canvas="" data-position="right" class="off-canvas position-right">
          <div data-off-canvas-content class="off-canvas-content">
            <ul data-off-canvas class="menu vertical">
            {{#each settings.menu}}
              <li><a href="{{url}}">{{name}}</a></li>
            {{/each}}
            </ul>
          </div>
        </div>
      </div>

      <div class="title-bar hide-for-large">
        <div class="title-bar-right">
          <span class="title-bar-title">{{settings.title}}</span>
          <button type="button" data-toggle="offCanvasRight" class="menu-icon"></button>
        </div>
      </div>
      <div class="top-bar hide-for-small show-for-large">
        <div class="top-bar-left">
          <ul class="menu">
            <li class="menu-text logo">
              <p>Mikel</p>
            </li>
          </ul>
        </div>
        <div class="top-bar-right">
          <ul class="dropdown menu">
          {{#each settings.menu}}
            <li><a href="{{url}}">{{name}}</a></li>
          {{/each}}
          </ul>
        </div>
      </div>

      {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
      {{> body}}

    </div>

You commented on Lance Gundersen's post almost 5 years

Thx for the reply Rafi, So currently there is no knwn fix for my current issue?

Posts Followed

Following

Followers