Stretchy banner in a fixed with page

dipanjan94dipanjan94 Registered Users Posts: 83 Big grins
  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?

  1. 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?

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited April 16, 2020

    @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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited April 16, 2020

    @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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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;
    }
    
  • dipanjan94dipanjan94 Registered Users Posts: 83 Big grins

    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' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @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;}
    
    }
    
  • dipanjan94dipanjan94 Registered Users Posts: 83 Big grins

    Thank you so much! Worked perfectly! :)

Sign In or Register to comment.