Split Screen on Independent Homepage with Buttons

shearerviljoenshearerviljoen GermanyRegistered Users Posts: 26 Big grins
I want to create a split screen on the Independent Homepage with centred buttons on the either side of the split. Is this something that is possible and dedicating each side to a specific color?

Cant seem to see the option to upload an image, so will just drag what Im hoping for here.

Comments

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,806 Major grins

    Try two single photo widgets side by side.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • shearerviljoenshearerviljoen GermanyRegistered Users Posts: 26 Big grins
    Hmmm may I ask how do I add a widget?
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,846 Major grins
    edited May 13, 2020

    @Allen said:
    Try two single photo widgets side by side.

    I don't think he wants two pictures, just two background colors.

    @shearerviljoen - Just add a HTML/CSS Block to your home page:

    HTML:

    <div class="container">
    
      <div class="section retouch">
    
        <div class="my-button"><a href="">Retouching</a></div>
    
      </div>
    
      <div class="section photography">
    
        <div class="my-button"><a href="">Photography</a></div>
    
      </div>
    
    </div>
    

    CSS:

    .container {
      display: flex;
      height: 100vh;
    }
    
    .section {
      width: 50%;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;  
    }
    
    .retouch {background-color: #eeeeee;}
    
    .photography {background-color: black;}
    
    .my-button a {
      padding: 15px 30px;
      border: 1px solid;
      text-transform: uppercase;
      font-size: 2rem;
    }
    
    .retouch .my-button a {
      border-color: black;
      color: black;
    }
    
    .photography .my-button a {
      border-color: white;
      color: white;
    }
    
      .my-button a:hover {
        border-color: gray;
        color: gray;
      }
    

    That should get you close.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,846 Major grins

    @shearerviljoen said:
    Cant seem to see the option to upload an image, so will just drag what Im hoping for here.

    You're new, so you have limited access to the forums features, like posting pictures.

  • shearerviljoenshearerviljoen GermanyRegistered Users Posts: 26 Big grins
    edited May 13, 2020
    Wow, @Hikin' Mike You are absolutely amazing. Definitely got me a lot closer to my end goal.
    I have a few more questions to ask if I may?
  • shearerviljoenshearerviljoen GermanyRegistered Users Posts: 26 Big grins
    @"Hikin' Mike" I noticed you already added a hover effect which is definitely what I want. But can it be done that the colours of the "buttons" are inverted? Basically filling out the box, with the text taking on the color of the background?

    Again I'll just drag the image here of what I mean.
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,846 Major grins
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,846 Major grins

    @shearerviljoen said:
    @Hikin' Mike I noticed you already added a hover effect which is definitely what I want. But can it be done that the colours of the "buttons" are inverted? Basically filling out the box, with the text taking on the color of the background?

    Again I'll just drag the image here of what I mean.

    Remove the hover here:

    .my-button a:hover {
      border-color: gray;
      color: gray;
    }
    

    Use this:

    .retouch .my-button a:hover {
      border-color: black;
      color: white;
      background-color: black;
    }
    
    .photography .my-button a:hover {
      border-color: white;
      color: black;
      background-color: white;
    }
    
  • shearerviljoenshearerviljoen GermanyRegistered Users Posts: 26 Big grins
    Ah man @"Hikin' Mike" you sir, are a life saver!!!! Thank you so much. It's almost there. "Someone give the man a Bell's"

    Now I need to ask:
    1. How do I link the buttons to their respective Folders? (Although I can do some research on this if it's too much trouble to ask.)
    2. And also another thing with the split screen. Is there a way to have it run across the entire screen (horizontally) and responsively? That the edges don't "end" if I can put it that way.
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,846 Major grins
    edited May 13, 2020

    @shearerviljoen said:
    1. How do I link the buttons to their respective Folders? (Although I can do some research on this if it's too much trouble to ask.)

    You need to copy the url of each folder in the a tag here in your HTML section: <a href="">. As an example <a href="your-folder-here">.

    @shearerviljoen said:
    2. And also another thing with the split screen. Is there a way to have it run across the entire screen (horizontally) and responsively? That the edges don't "end" if I can put it that way.

    In the HTML/CSS block you should see an triangle-looking icon "Dimensions" here:

    Set each margin from 12px to 0.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,846 Major grins

    You can add this to your CSS for mobile devices. Screen sizes 736px and smaller switch the boxes from horizontal to vertical:

    @media (max-width: 736px) {
    
      .container {display: block;}
    
      .section {
        width: 100%;
        height: 50vh;
      }
    
    }
    
  • shearerviljoenshearerviljoen GermanyRegistered Users Posts: 26 Big grins
    Thanks @"Hikin' Mike" , one issue I noticed now with the Mobile view: after adding the code to my CSS, (it works) but my footer, which is basically my contact information appears in the Photography section now.
  • shearerviljoenshearerviljoen GermanyRegistered Users Posts: 26 Big grins
    Is there a way possible for both desktop and mobile to have this screen split (Homepage) cover the entire screen at default, and that there is no scrolling necessary?
    I've gone a played with the first CSS code you sent and changed the height to 80vh; and that works on the desktop, but I don't know if it'll vary on different desktops depending on the size of their browser.
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,846 Major grins
  • shearerviljoenshearerviljoen GermanyRegistered Users Posts: 26 Big grins
    Alright still working on it. But check out www.shearerviljoen.com

    Little sidetone, the Logo is the only thing that takes you to the homepage. But still need to change the logo too as it's for the Retouching only, and I've now merged my 2 businesses. (Retouching and Photography)
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 4,846 Major grins

    @shearerviljoen said:
    Thanks @Hikin' Mike , one issue I noticed now with the Mobile view: after adding the code to my CSS, (it works) but my footer, which is basically my contact information appears in the Photography section now.

    Change the height: 50vh; to height: 50% for mobile.

  • shearerviljoenshearerviljoen GermanyRegistered Users Posts: 26 Big grins
    That has done the trick. Thanks once again @"Hikin' Mike"

    Really appreciate your help. Now trying to follow on your tutorial "Off-Canvas Navigation Menu For SmugMug" but for mobile only B) Let's see how far I get with it.
Sign In or Register to comment.