[Resolved] #content padding being ignored

[Randy]

I’ve dug around the documentation and can’t seem to find how to make this one work.

I have javascript running in an Element with the hook generate_after_slidout_navigation

The particular part of javascript just gets ran on some pages based on a url parameter being present and page containing a certain div. All other style changes I’m running in that codeblock work fine, but not this one:

document.querySelector(“#content”).style.paddingTop = “0 !important”;

How can I get rid of the top padding in this limited circumstance?

[Elvin]

Hi,

Can you link us to the page in question?

Also, can you indicate which part of the page you’re trying to remove?

You can provide the site details on the private information text field. Thank you. 🙂

[Randy]

Hi Elvin,
Thanks for the help!
See private info box for url details

[Elvin]

https://share.getcloudapp.com/rRu0b6RR
To clarify further: Are you trying to reduce the space on the red box or the green box?

#content padding-top: 0 !important; adjusts the space on the green box.

div#content{ padding-top: 0 !important; } literally does the same thing as your script.
Devtool demo here – https://share.getcloudapp.com/E0u4jqwk

If you’re trying to reduce the space on the red box, it’s added by a div that contains a google ad.

.rlmtopaddiv has a fixed height: 280px;. Adjust it to your preference.

[Randy]

Thanks Elvin.

div#content{ padding-top: 0 !important; } is basically what I am trying to do, but the issue I am having is that I only want to conditionally apply that css when a url parameter is present on the page, say &myparam=myvalue

Any thoughts on how I would apply that css conditionally based on a url parameter? (e.g. sometimes the css will be applied on Page A, and sometimes it will not be applied on Page A — it all depends on the url parameter)

[Tom]

How are you currently trying to output it?

You should just be able to do this:

add_action( 'wp_head', function() {
    // your conditions here..

    ?>
        <style>.your-css {...}</style>
    <?php
} );

[Randy]

Nice! That did the trick, thanks Tom!!

Btw, is there any difference between:

?>
  <style>div#content{ padding-top: 0 !important; }</style>
<?php

and

echo '<style>div#content{ padding-top: 0 !important; }</style>';

when putting it into an add_action(‘wp_head’ function?

[Elvin]

These 2 basically does the same thing but:

?>
  <style>div#content{ padding-top: 0 !important; }</style>
<?php

This one is preferred/better practice because it lessens the strain to the server as PHP doesn’t have to execute it as it is added directly as a static HTML tag. Ideally, only the logic part is left for PHP. All static contents should be left outside of it.

Meanwhile, this: echo '<style>div#content{ padding-top: 0 !important; }</style>'; passes the text string to be processed. It adds extra steps and uses unnecessary processing power from the server.

Note: In real world scenario, these two will barely have noticeable performance difference. But of course, its good to know what the best practice is as multiple use of bad practice can accumulate and slow down the server.

[Randy]

Awesome Elvin! Really helpful answer. I appreciate it!

[Elvin]

Awesome Elvin! Really helpful answer. I appreciate it!

No problem. Glad to be of any help. 😀

[Author]

Posts