Annoying style.css and .home-post problem :(

[ClarkRS]

Hi ppl,

I’m new in wordpress and css, and i have one really annoying problem :( I’ve created revolution slider, to be autoresponsive and that’s all ok, but on my home post, rev slider looks like it is boxed, much smaller than it should be. It looks like it is in some box or something? This is from style.css:

[Mod Edit] Snipped code. That’s way too much for the forum. Please provide a link to the site in question or provide a reduced test case on a platform like Codepen.

[stw2011]

It will be helpful for others to help you, I think, if you can post a link to your site.

[ClarkRS]

Thank you good people :)

My website is cgnekretnine[dot]com, and rev_slider is on my homepage.

[Senff]

I don’t really see anything wrong with it to be honest. Can you be more specific? Any particular browser?

[ClarkRS]

Hi @Senff, thank you for trying to help me :)

In any browser (i’m using Chrome), i have white borders around my revolution slider. My idea is to be full width + autoresponsive, no white borders around revolution slider.

http://postimg.org/image/noml27i1d/

U see, i dont want to have those white borders around my slide.

But, it looks like it is (rev_slider) in some white box, but it is already set to be autoresponsive, here is pic:

http://postimg.org/image/6fuynoa3b/

Again, txn you all for trying to help me :)

P.S. If i delete “width: 100%” and set padding to 0px, and set my rev slider to fixed 1350×500, than on my comp it looks like it’s ok, no borders around my slider, but on every other resolution, especially on my android mobile it looks awful :(

[Tom Houy]

It looks like there are some hidden navigation arrows that are directly underneath the slider, which is what is causing that extra gap at the bottom. They are currently set to “display: hidden”, which will make them invisible but they will still take up space:

<div style="visibility: hidden;" class="tp-leftarrow tparrows navbar hidearrows"></div>
<div style="visibility: hidden;" class="tp-rightarrow tparrows navbar hidearrows"></div>

But if if they are changed to this instead, they will be invisible and not take up any space either.

<div style="display:none !important;" class="tp-leftarrow tparrows navbar hidearrows"></div>
<div style="display:none !important;" class="tp-rightarrow tparrows navbar hidearrows"></div>

(The addition of “!important” might not be necessary, and it would be best to leave that out if it works without it.)

I would check through the settings more carefully for the slider to make sure there aren’t any more options to completely disable the navigation arrows. And perhaps contact the plugin developer regarding that issue if you can’t find a solution within the admin panel for the slider.

[ClarkRS]

You think that the problem is with my revolution slider? Not with my homepage css settings?

[Senff]

I’d say the slider IS responsive — the slider takes up as much widht as it can, BUT since you set the wrapper to only 1000 pixels wide, this is also the width of the slider.

As for the white space above and below it, that’s probably because of the 30 pixel top/bottom padding of .home-post.

So there’s nothing wrong with the (settings of) the slider, it’s the things that are surrounding it.

[ClarkRS]

Hm… Tnx @Senff, i see now that the wrapper is the problem.

When i change wrapper to 100%, slider looks as it should be, but footer and slider bar changes completely and looks messed up, i need them to stay 1000px width.

http://postimg.org/image/kdbzg5ejn/

So, is there any solution, not to change the wrapper (wrapper stays 1000px) but to exclude it from home post (homepost to be full width)?

Or to change the wrapper to 100%, and somehow to set the wrapper for slider bar and footer and copyright bar to be 1000px?

Tnx again mate, i really appreciate it.

[Senff]

I would say for the home post, make the wrapper 100% (so that it’s full width), but put the footer and copyright bar (and any other elements you want to keep as they are) in their own wrapper with a 1000px width.

[ClarkRS]

I don’t know how to do that. If i change

.wrapper { width: 1000px; margin: 0 auto; position: relative; }

to width: 100%, than i dont know how to put 1000px wrapper for footer, copyright bar and slider bar. Every solution i tried, wasn’t successful.

I have to find out way to exclude .home-post from wrapper.

[ClarkRS]

THANK GOD, finally a solution :D

/* ==== HOME ===== */

.home-post { float: left; width: 100%; padding: 0px 0; }
.home-post .wrapper { width: 100% !important; margin: 0 auto !important; position: relative; }

THANK YOU ALL FOR TRYING TO HELP ME ! :))

[Author]

Posts