Stretchy banner in a fixed with page

dipanjan94

1. I have this page - https://www.dipanjanpal.com/Portfolio which is a fixed with page. I want to keep it that way, but I want to make the banner stretchy for both mobile and desktop. How can I do this?

2. In the same page under the banner, I have listed four galleries. I wish to change the opacity/transparency when the cursor hovers over it, and the font (both font and font size) for this. Can this be done? To give you an idea of what I want to make it look like, please have a look at this - https://www.chrisburkard.com/Pages/Portfolio

I want the same font and similar transparency. How can I do this?

3. In this page - https://www.dipanjanpal.com/Recognition I have two pictures, both of them links to a specific URL. Can in the middle of picture, where if someone hovers their mouse, similar effect to the previous questions will be there?
   Like on this two pictures, I want "Accolades" and "In the press" written and it should be gone when someone hovers their cursor on it, kinda same like the portfolio page of Chris Burkard. How can this be done?

Hikin' Mike

@dipanjan94 said:
2. In the same page under the banner, I have listed four galleries. I wish to change the opacity/transparency when the cursor hovers over it, and the font (both font and font size) for this. Can this be done? To give you an idea of what I want to make it look like, please have a look at this - https://www.chrisburkard.com/Pages/Portfolio I want the same font and similar transparency. How can I do this?

If you want to use the same font (Pathway Gothic One) that he uses, you will need to add an addition Google font by following this example: https://www.aaronmphotography.com/Customizations/Fonts-Links/Google-Fonts

Once you've done that, you can add this to your CSS:

.sm-user-ui .sm-tile-content > .sm-tile-info {background: rgba(255, 255, 255, .1);}

.sm-user-ui .sm-tile-info .sm-tile-title {
  font-size: 48px;
  font-weight: 400;
  color: #fff;
  font-family: Pathway Gothic One, Roboto, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 9px;
  text-shadow: 4px 3px rgba(0,0,0,0.1);
}

Hikin' Mike

@dipanjan94 said:
3. In this page - https://www.dipanjanpal.com/Recognition I have two pictures, both of them links to a specific URL. Can in the middle of picture, where if someone hovers their mouse, similar effect to the previous questions will be there?
Like on this two pictures, I want "Accolades" and "In the press" written and it should be gone when someone hovers their cursor on it, kinda same like the portfolio page of Chris Burkard. How can this be done?

Remove the two photo blocks and add ONE HTML/CSS Block and add this to the block:

HTML

<div class="content-wrapper">

  <figure class="item">
    <div class="item-image-wrap"><img src="https://photos.smugmug.com/Prints/Iceland/i-hJqr7Cn/0/ce46c96d/M/DSC02447-M.jpg" alt="Accolades">
      <div class="item-caption-wrap">
        <figcaption>
          <a href="https://www.dipanjanpal.com/Recognition/Accolades" title="">Accolades</a>
        </figcaption>
      </div>
    </div>
  </figure>

  <figure class="item">
    <div class="item-image-wrap"><img src="https://photos.smugmug.com/Portfolio/India/i-SM4pg2w/0/1831575c/M/IMG_9326-M.jpg" alt="In the Press">
      <div class="item-caption-wrap">
        <figcaption>
          <a href="https://www.dipanjanpal.com/Recognition/In-the-press" title="">In the Press</a>
        </figcaption>
      </div>
    </div>
  </figure>

</div>

CSS

.content-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 1200px;
  margin: auto;
}       

  .content-wrapper figure {margin: 0 auto 3rem;}

.item-image-wrap {position: relative;}

  .item-image-wrap img {
    display: block;
    max-width: 588px;
  }

.item-caption-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}

  .item-caption-wrap figcaption {
    display: table;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

    .item-caption-wrap figcaption a {
      display: table-cell;
      height: 100%;
      width: 100%;
      vertical-align: middle;
      text-align: center;
      background-color: rgba( 255, 255, 255, .1 );
      font-size: 48px;
      font-weight: 400;
      font-family: Pathway Gothic One, Roboto, Helvetica, Arial, sans-serif;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 9px;
      text-shadow: 4px 3px rgba( 0, 0, 0, 0.1 );
      transition: all .5s ease-in-out;
    }

      .item-caption-wrap figcaption a:hover {opacity: 0;}

Hikin' Mike

@dipanjan94 said:
1. I have this page - https://www.dipanjanpal.com/Portfolio which is a fixed with page. I want to keep it that way, but I want to make the banner stretchy for both mobile and desktop. How can I do this?

Add this to your Theme's CSS:

/*
* Force Portfolio Banner to Stretch with Fixed Width Page
**************************************************************/
.sm-user-ui .sm-page-layout.sm-page-layout-full {max-width: 100% !important;}

.sm-user-ui .sm-page-layout-row[data-layout-row="Z"] /* Banner */,
.sm-user-ui .sm-page-layout-row[data-layout-row="D"] /* 4 Galleries */,
.sm-user-ui .sm-page-layout-row[data-layout-row="c"] /* Aerial Photography */,
.sm-user-ui .sm-page-layout-row[data-layout-row="J"] /* Iceland */,
.sm-user-ui .sm-page-layout-row[data-layout-row="Q"] /* India */ {
  max-width: 1200px;
  margin: 0 auto;
}

dipanjan94

Hey Mike, thank you so much! You codes have worked perfectly fine.

For the portfolio page, however I decided to get rid of the banner to have a clean and tidy look.

I have one follow-up question - in the CSS code you posted as an answer to Question 2, the font-size is 48px. This looks a bit too large on my phone, could you make the font smaller (say 36px) for mobile devices? Thank you so much in advance!

Hikin' Mike

@dipanjan94 said:
I have one follow-up question - in the CSS code you posted as an answer to Question 2, the font-size is 48px. This looks a bit too large on my phone, could you make the font smaller (say 36px) for mobile devices? Thank you so much in advance!

There you go:

@media (max-width: 736px) {

  .sm-user-ui .sm-tile-info .sm-tile-title {font-size: 36px;}

}

dipanjan94

Thank you so much! Worked perfectly!