Docs

[gobeyondesign]

aaapoolsfred.com

I’d like to make the widget in the footer1 25% of the width and the footer 2 75% of the width.

How do I do this? Thank you

Michele

[Friech]

Hi Michele,

Thanks for writing in! Please add this on your Custom Global CSS on Customizer.

.x-colophon.top .x-container .x-column.x-1-2:first-of-type {width: 23%;}
.x-colophon.top .x-container .x-column.x-1-2:last-of-type {width: 73%;}

Hope it helps, Cheers!

[gobeyondesign]

Something different has happened – there is a rounded border around the items in my menu – how do I remove this?

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.x-navbar .desktop .x-nav>.x-active>a>span, .x-navbar .desktop .x-nav>.current-menu-item>a>span {
    border-color: transparent;
}

Hope that helps.

[gobeyondesign]

aaapoolsfred.com/about-us

how do I make the top image over the transparent background, I tried using z-index: 999999; – that didn’t work.

AND

How do I make the black translucent background over the picture go from the very top (under the picture with the wave) to the very bottom – where the bright blue three column bar is?

Thank you for your help!

[Friech]

Hi There,

The top image is already over the transparent background, please clarify.

Remove the padding-bottom of your second content-band. Try adding a class pbn on it.

Let us know how it goes.

Thanks.

[gobeyondesign]

Take a look at what it looks like in Safari. I’m talking about the black background (50% transparency) behind the text column.

[gobeyondesign]

so this code:

.x-colophon.top .x-container .x-column.x-1-2:first-of-type {width: 23%;}
.x-colophon.top .x-container .x-column.x-1-2:last-of-type {width: 73%;}

is messing up the tablet and mobile view – it makes it 23% and 73%

how do I fix this PLEASE HELP!

Michele

[Friech]

Hi There,

Add z-index: 1; on the container.

Please update the given css code to this:

@media (min-width:  980px) {
	.x-colophon.top .x-container .x-column.x-1-2:first-of-type {width: 23%;}
	.x-colophon.top .x-container .x-column.x-1-2:last-of-type {width: 73%;}
}

Thanks.

[gobeyondesign]

I upgraded the code and I still get the same thing – I don’t want the columns to be 23 & 73% for tablet and mobile view – only for the desktop – because it moves it down to another row. And its ugly. See my attached image.

[Lely]

Hi There,

Upon checking the source code, the CSS is not updated yet. See this:http://screencast-o-matic.com/watch/cbnnnsQSli
If you’re sure that you have updated it already, please try to clear cache and then check again.

[gobeyondesign]

I have changed the coded to what Freich recommended and it did not fix the problem so I deleted it because I don’t need conflicting stuff. I have added it back – and it still doesn’t fix my issue. Please help me because I have been trying to finish this website now for weeks and this is like the last problem.

[Lely]

Hello Michele,

See attached screenshot.
Look for this part:

  .x-colophon.top .x-container .x-column.x-1-2:first-of-type {width: 23%;}
.x-colophon.top .x-container .x-column.x-1-2:last-of-type {width: 73%;}
}

That part sets the footer column width regardless of screensize. The extra closing curly brace at the end is considered CSS syntax error and will stop other CSS after that from working.
Then you have this code also at the end:

@media (min-width:  979px) {
	.x-colophon.top .x-container .x-column.x-1-2:first-of-type {width: 100%;}
	.x-colophon.top .x-container .x-column.x-1-2:last-of-type {width: 100%;}
}

Because of the syntax error, it will not work. But if it works, this will not give you want you wanted because it sets desktop column view to 100% leaving mobile view to 23% and 73% width.

Remove both of that CSS and use this instead:

 
@media (min-width:  979px) { 
    .x-colophon.top .x-container .x-column.x-1-2:first-of-type {
       width: 23%;
    }
    .x-colophon.top .x-container .x-column.x-1-2:last-of-type {
       width: 73%;
    }
}

By default column width on smaller devices is 100%. Then that custom CSS will adjust the column width on just desktop view.

Hope this helps.

[Author]

Posts