Docs

[simon_ramsey]

Hi support,

I am building a website for a client and have been having some issues with padding. As far as I can see, I have set padding and margins set for each element in cornerstone (5em 1em 5em 1em) and it’s working well for every column except the one with the slideshow. I can use relative positioning to fix this but I would prefer a better method as I end up with white space at the bottom of the page which I am unsure how to remove (.site height or something?). The attached image shows each issue I have been unable to fix so far.

A sample of the original design is also attached for reference regarding object placement.

Wordpress version 4.7.2
X-Theme version 4.6.4
Cornerstone version 1.3.3
Using Ethos

Kind regards

Simon

[simon_ramsey]

Image was too big. Reattached

[simon_ramsey]

Original design layout

[Nico]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[simon_ramsey]

The website had an under construction page which I have turned off for the time being.

http://www.planetearthkids.com.au/

Kind regards

Simon

[Lely]

Hi Simon,

To remove the white space bar on top, please use the following CSS. Add it on Appearance > Customize > Custom > Edit Global CSS:

.home .x-container>.offset {
    margin: 0 auto;
}

The space below the footprints is part of you header image. It is white because image is transparent. We can move up the image from your section 2, but then this will cover the right part of the image too. See this:http://screencast-o-matic.com/watch/cbnVQEQRF5

To achieve the layout you want, please click Section > Row: Inspect Row > Disable Column Container. Do that for all your sections.

Then remove width from this custom CSS:

.box-2 {
    display: block;
    height: 325px;
    width: 670px;
    float: left;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}

It is not recommended to define fixed width. It will overflow from the container, thus disrupt the normal flow of column width.

Then also add this:

.x-flexslider-shortcode-container {
    margin-bottom: 0;
}

On your section 6 image element, add mbn on the class field. This will reset default image margin to zero. (m) – margin (b) – bottom (n) – none

Hope this helps.

[simon_ramsey]

10/10.

One more question. I want to have a consistent box width across the website (excluding the slideshow which will be 2 boxes wide). How would you recommend doing this without fixed width? If I remove the fixed width code they shrink to the width of the text which in some cases is just going to be a single word.

[Lely]

Hi Simon,

Please add the class on your columns class field instead. For example, remove box-3 from your text element class field, then add it instead on it’s column class field. Then your CSS to this:

.box-3 {
    height: 200px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}

On your ROW, inspect it so you can also ENABLE MARGINLESS columns.

Hope this helps.

[simon_ramsey]

Thank you.

Also, I would like to add a shadow to the content area. How may I do this?

.site {
-webkit-box-shadow: 0px 0px 50px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 50px 5px rgba(0,0,0,0.75);
box-shadow: 0px 0px 50px 5px rgba(0,0,0,0.75);
}

I tried this but it isn’t working.

[Rue Nel]

Hello There,

Thanks for updating in! This code is correct. The shadows is not showing because .site hides the overflow. Anything outside of the .site element such as the shadows will not be visible. You can only see the shadows by using this;

.x-boxed-layout-active .site {
  overflow:visible;
  -webkit-box-shadow: 0px 0px 50px 15px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 50px 15px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 50px 15px rgba(0,0,0,0.75);
}

Hope this helps.

[simon_ramsey]

It does work, but it appears it disables the background colour or image?

Is there a way to get the slideshow to load with the page? It seems to have a latency which I think coincides with animation speed.

You have been very helpful so far, thank you!!!

[Rue Nel]

Hello There,

Thanks for updating in! To get your slider to load a little bit faster as the page loads, please reduce the animation speed. Please keep in mind that 1000ms is equivalent to 1 second. Please check out this screenshot: http://prntscr.com/e3tkbk

Hope this helps.

[simon_ramsey]

Thanks done 🙂

With the slideshow, I wish to add a box shadow as I have with the other elements in the page. However, the box has a small amount of white space below it which I seem to be unable to remove. Is there a way to remove this white space so that the slideshow is consistent?

[Lely]

Hi Simon.

Please use the following CSS:

.home .x-flexslider-shortcode-container { /*To add box shadow*/
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
    box-shadox: 0px 0px 15px 0px rgba(0,0,0,0.75);
}
.home .x-flexslider .x-slides img { /*to remove default bottom margin of the image resulting to white space */
    margin-bottom: 0;
}

Hope this helps.

[simon_ramsey]

That worked perfectly, thank you 🙂

[Author]

Posts