Split Screen on Independent Homepage with Buttons

shearerviljoen

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.

Allen

Try two single photo widgets side by side.

shearerviljoen

Hmmm may I ask how do I add a widget?

Hikin' Mike

@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' Mike

@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.

shearerviljoen

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?

shearerviljoen

@"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' Mike

@shearerviljoen said:
I have a few more questions to ask if I may?

Fire away.

Hikin' Mike

@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;
}

shearerviljoen

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' Mike

@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' Mike

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;
  }

}

shearerviljoen

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.

shearerviljoen

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' Mike

I'll need to see your site now.

shearerviljoen

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' Mike

@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.

shearerviljoen

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.