On my desktop, I added '50px' padding to the body of my page and it's working properly. However, on smaller and medium screens, it's not functioning correctly. I tried using Bootstrap @media CSS functionality, but it still doesn't work as expected.
Here is my HTML:
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<div class="content-wrapper px-auto MainRenderedbody">
<section class="content">
render body
</section>
</div>
render partial body
</div>
And here is my CSS:
<style type="text/css">
@@media (min-width: @@screen-sm-min) and (max-width: @@screen-sm-max) {
.MainRenderedbody {
padding-top:100px;
}
}
.MainRenderedbody {
padding-top:45px;
}
</style>
I have searched for a solution to this problem, applied various fixes, but nothing seems to work. That's why I am posting this issue again. Can anyone help me?
Desktop screen picture: https://i.sstatic.net/P6IBC.png
Small screen picture: https://i.sstatic.net/d2ttC.png
The 'DELETE Batch' section seems to be missing. I want to bring it back by adding some extra padding or another trick. Any suggestions from experienced developers would be greatly appreciated. Thank you!