Header height and slide show word wrap help

nehlsandwebsterwell · Member · Apr 14, 2017 at 5:14 pm
Copy link

Add topic to favorites
First my header image is getting cut off height wise because I am not using visible “tittle, tagline, and hero line.” I’m not using them because my header has all the information I want already. It only seems to be cut off on PC, not tablet or phone if that matters.

Second I would like to make the image slide show on my home page next to the text that show my services. Basically text on the left and image slide show on the right, side by side. Right now the slide show is under my text on the page. Help would be much appreciated.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 15, 2017 at 1:59 am
Copy link
Hi, on the header image, let’s add a bit of top and bottom padding, as a percentage, and see what you think.
```
.header-bg {
	padding: 8% 0
}
```
On the slideshow, given your images are portrait orientation, and given that they are very tall compared to the width, the following is the best we are going to be able to do.
```
.page-id-2 .slideshow-window {
	padding-bottom: 100% !important;
}
```
After adding this, make sure and check in tablet and phone, if you can to make sure nothing has gone awry, but in my testing, I think all is good.
nehlsandwebsterwell · Member · Apr 15, 2017 at 5:46 pm
Copy link
Thank you very much for your help. The header is exactly what I wanted. I am going to remove the slideshow and put in a single picture to show you what I was aiming for. I can resize all the images and upload again as well if that would help. If you have a chance please check out my home page again and where the stand alone picture is, I would like to put a slideshow…. if possible. Thank you, have a great weekend.
thesacredpath · Member · Apr 17, 2017 at 7:58 pm
Copy link
Hooray!

For the slideshow, are you talking about to the right of your bulleted list? This could be a bit tricky, but we can certainly give it a try. What you would want to do is to wrap both parts in a div with a CSS class we can use to size and position them. It would generally look something like this from the HTML/Text tab in the page editor.
```
<div class="home-left">
<ul>
<li>bulleted item text</li>
<li>bulleted item text</li>
<li>bulleted item text</li>
...
</ul>
</div>
<div class="home-right">
[gallery type=”slideshow” ...]
</div>
```
nehlsandwebsterwell · Member · Apr 19, 2017 at 4:04 pm
Copy link
You are correct in that I want the slideshow to the right of the bulleted list. I tried the code that you gave me above, but it doesn’t seem to do what we want… maybe I did it wrong. Could you take a look for me? Thank you for all of your time you have been a huge help.
dcoleonline · Staff · Apr 19, 2017 at 4:44 pm
Copy link
Hi there,

The HTML looks good.

If you add this CSS via My Site > Customize > CSS, it will move the slideshow to the right of the list on large screens:
```
@media screen and (min-width: 560px) {
    .home-left {
        float: left;
        margin-right: 50px;
    }
}
```
When the site is viewed on screens small enough for the mobile menu to appear, the slideshow will be shown below the list.
nehlsandwebsterwell · Member · Apr 19, 2017 at 5:24 pm
Copy link
Thank you all so much! This is perfect!
dcoleonline · Staff · Apr 19, 2017 at 5:35 pm
Copy link
You’re welcome. Happy to help!

No items found.