Full screen but limit height

mdental · February 2016

Hi,

1. I am trying to make my slider stretch all the way across the screen like in 'full screen' but I need to limit the height to 300px. Is this possible? I have multiple Sliders and I only want to do this on one or two Sliders, not all of them. Also, if I choose the 'full screen' option, if I resize the browser, there is a lot of blank space below the Slider. How can I fix this? What also makes it a bit tricky is that my menu is to the left, so if I choose other options, part of the slider is hidden under the menu.

2. On the mobile site, the logo moves to the middle of the screen, which is what I want, but there is too much blank space underneath it. How can I change this?

The website is:

http://www.mascotdentalclinic.com.au/profiletester/

Thanks!

Jess

Albert · February 2016

Hey,

1. We did never saw such option included so we don't think so that this would be possible.

2. There is to much space underneath it because you simply forgot to turn off "Right Top Bar" under Theme options > Header & Subheader > Extras section.

mdental · February 2016

Hi,

Thanks for the reply! I'm aiming for something like the "Offer" page on the BeBeauty theme, where the image doesn't stretch over the full height of the screen and I can still have the menu on the left without cutting the image. But I've got multiple Sliders and don't want to do it for all of them. I've tried to do it by just putting an image there but it cut out part of the image and then tried using the Revolution Slider but that gives all the blank space. So I'm not sure which one is better. I'm reluctant to install the BeBeauty theme as I only want to change that one thing on my page instead of the whole theme.

Same with the logo - mine does funny things when the browser is resized. The "Right Top Bar" has always been off. There's some CSS that was put on the page before that I'm not if it's affecting the logo:

h1, h2, h3, h4 { font-style: bold; }

/* Background */

#Wrapper, #Content, #Header_wrapper {

background-color: transparent;

}

/* Top bar */

#Top_bar:not(.is-sticky) #logo {height: 180px; line-height: 180px; }

#Top_bar:not(.is-sticky) .menu > li > a span:not(.description) { padding: 5px 5px; letter-spacing: 1px; }

#Top_bar .menu > li > a { font-style: bold; }

@media only screen and (max-width: 1280px) {

#Top_bar .logo #logo img { max-height: 150px !important; }

#Top_bar #logo { height: 150px !important; }

#Top_bar .logo {

width: 100%;

text-align: center;

}

Thanks,

Jess

Albert · February 2016

1. Do you mean to do something like we did on http://themes.muffingroup.com/be/beauty/our-offer/ ?

2. No, you did not turned it off. We did checked it and it's not true. If it's too difficult to find this option, them maybe copy/paste the following css will be easier:

#Top_bar .top_bar_right { display: none !important; }

mdental · February 2016

Hi,

Sorry, not BeBeauty, I meant BeBeauty 2 http://themes.muffingroup.com/be/beauty2/offer/

Is the big image part of a slider or just an image? If it's an image, how can I make it full width but still control the height?

Thanks for the css regarding the white space, I tried turning on and off the 'Right Top Bar hide' button but neither made a difference, but the css worked!

Thanks,

Jess

Albert · February 2016

This is just background image. We set it with Featured Image option which is available for each page. But if you want to control it's height, you need to play with Subheader padding under Theme options > Header & Subheader > Subheader section.

mdental · February 2016

Hi,

Thanks for that, but the if I use the Featured Image on that page then I need to change the Header > Minimalist to 'Default' (Theme Options > Header > Minimalist > Default). If I do that, then there is a big white space above the Revolution Slider on the main homepage.

Is there a way to keep the Slider on the homepage as it is and only have the Featured Images on the other pages?

Thanks,

Jess

mdental · February 2016

And even when I have the featured image and Minimalist > Default, the featured image doesn't stretch across the whole width of the screen?

Albert · February 2016

But we do not see this image on your homepage.

mdental · February 2016

Hi,

Sorry, I've been playing around with the page most of the day and figured it out, but thanks anyway!

mdental · February 2016

Hi,

Sorry, I have another problem now. I have different image for tablet, mobile and desktop mode, however, when the browser size is between 987px - 1200px, the image completely disappears. The image is also very squashed between browser size 773-987px as well.

In my BeTheme Options > Custom CSS, I have the following css to make the logo the correct size when resizing the browser:

@media only screen and (max-width: 1280px) {

#Top_bar .logo #logo img { max-height: 150px !important; }

#Top_bar #logo { height: 150px !important; }

I know this css is affecting the images as when I delete it, the images are fine (but the logo gets squashed). Is there something I can add/do keep the both the logo and the image/s the correct size?

Thanks,

Jess

Albert · February 2016

Which image completely disappears exactly? Please tell us which one you mean.

mdental · February 2016

Hi there,

Please see screenshots attached. the banner doesn't resize properly as i change the width of browser:

mdental · February 2016

Not sure if that worked. see here

http://goo.gl/CBUAFs

http://goo.gl/2UjGyi

http://goo.gl/M0UJF0

Albert · February 2016

Unfortunately because of the css responsible for logo, this background must disappear. We do not have any work around to display it.

Full screen but limit height

Comments