while the global for the pagination is currently set up as the following:
.pagination {
float: right !important;
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
again, on the other pages it's correctly displayed on the bottom on the page, however, on this particular page with the same exact css, the pagination is at the top where again, I need it at the bottom.
I would recommend looking at this snippet which is the full code needed for a data table with pagination at the bottom.
http://bootsnipp.com/snippets/featured/bootstrap-snipp-for-datatable
Related
I've tried a bunch of ways to remove this margin on the right of the YouTube Livestream page.
I'm doing this for an extension I'm working on and I'd like the margin to be removed completely from page.
I've already done the following:
margin: 0px !important;
It removed the margin on the left side of the page, but there's still a big chunk of margin on the right side and I have no idea how I should remove it.
Any help would be much appreciated.
The other margin spacing is actually on the elements directly inside #columns, which is #primary & #secondary. Overiding those extends width to the window edges.
div#columns {
max-width: 100%!important;
}
div#primary {
margin: 0!important;
padding: 0!important;
}
div#secondary {
padding: 0!important;
}
.html5-video-container video {
width: 100%!important;
height: auto!important;
}
I made some customization on my site, but noticed one issue that i cant resolve. Because main menu have fixed width, now main menu, and search and cart icons are overlapping with main menu, making contact page unaccessible. So how to make main menu, a little to left, so contact page will be usable ?
This is CSS from that part:
.wr-megamenu-container ul.wr-mega-menu {
z-index: 9999;
float: left;
margin: 0;
padding: 0;
width: 100%;
}
May be you should try to reduce the padding of each menu element, this way:
.header-primary-nav .wr-mega-menu.nav-menu> li >a { padding: 0 8px;}
Then you will also need to change your menu float rule from right to left this way:
.logo-wrapper .header-primary-nav, .logo-wrapper .hgroup-sidebar { float: left; }
This should solve your issue…
I don't know if you guys have messed with Squarespace Cover Pages but man they're hard to navigate code-wise. I'm doing a standalone promotional site that only requires a cover page and a video so I'm using the "Premier" cover page. However, for legal reasons I've got to have a footer with copyright info and a link to our privacy statement. My original idea was to use header injection with css ::after to include a full width div but I want the cover page to still take up the full screen and for the user to be able to scroll down to see the footer.
One example I tried to modify was https://answers.squarespace.com/questions/109923/adding-footer-text-on-cover-page-code-injection.html using this code:
<style>
#collection-559df309e4b026e5cd65a4b4
[data-slide-id="559df309e4b026e5cd65a4b5"]
.sqs-slice-group.group-social::after {
content: "some general text";
padding: 5px 0;
margin: 0 auto;
text-align: center;
font-size: 10px;
color: #fff;
}
</style>
I swapped out my collection ID and data-slide-id into this code but it put the "general text" block on top of the play button as well as in the upper-right corner of the screen. I've tried changing elements around to no avail - any help would be appreciated.
Here's what I would do, if I preferred to avoid the use of Javascript. Insert the following HTML into the "Code Injection" header area for the cover page. This will add a div that appears below the main content area, so that the user must scroll down to see it.
<div id="coverFooter">
<a id="coverPP" href="/privacy-policy/">Privacy Policy</a> <span id="coverCR">© 2016 Your Company, LLC</span>
</div>
<style>
#coverFooter {
position: absolute;
z-index: 1;
top: 100%;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
background-color: white;
box-sizing: border-box;
text-align: center;
padding-right: 30px;
padding-left: 30px;
/* Use this for right aligned text instead.
text-align: right;
padding-right: 60px;
padding-left: 60px;
*/
}
#coverPP {
white-space: nowrap;
}
#coverCR {
margin-left: 10px;
white-space: nowrap;
}
</style>
Here is a working example, which I will keep online for a week.
You will of course want to modify the href link, the copyright text, and perhaps the CSS rules such as colors and padding values.
Keep in mind that this is injecting the coverFooter div into the top of the body element, though CSS is making it appear at the bottom. This could encourage search engines to index the text inside the div as your page description in SERPS. Be sure to add a "Search Engine Description" under Settings -> Basic in order to help mitigate this, and keep an eye on your page description in SERPS. If this becomes a problem, keep the CSS in the header injection area, but replace the div HTML with Javascript which inserts the div at the bottom of the body element.
Finally, you'll either be linking to a privacy policy on another domain or you'll have to select "Add more pages" and add the privacy-policy page to the "not linked" section.
After installing a plugin at my blog on wordpress.org there's a empty blank space at the bottom of my site, after the footer that i'm unable to locate or remove.
The site is www.wearethepassengers.com/es
Any suggestions would be greatly appreciated as i'm just a not very expert user yet :)
thanks
There are 2 things which are causing the white space and smiley image in the footer.
wpstats - It adds a image at footer. So hide it using CSS.
img #wpstats{
display: none !important;
}
The social icons on the right hand side has the padding of 5px. So remove the padding:
.addthis-smartlayers{
padding: 0 !important;
}
If you check your css code, you have following code:
.addthis-smartlayers, div#at4-share, div#at4-follow, div#at4-whatsnext, div#at4-thankyou {
margin: 0;
padding: 5px;
}
Change this to:
.addthis-smartlayers, div#at4-share, div#at4-follow, div#at4-whatsnext, div#at4-thankyou {
margin: 0;
padding: 0;
}
This would solve your issue.
I'm creating a CSS button and it is working ALMOST perfectly. The problem is that when the button is larger than its allotted space, its end drops off to the next line. It also extends the page width to fit it properly, but then the end is on the next line >=(. Extending the page is perfectly fine, but the button should be whole.
Here is my example page...
http://www.lolstrategies.com/test/button_sample.html
It uses two tables and the button needs to also be in a table.
My current css uses float: left to push the images together as you can see by viewing the source. I'm hoping that it doesn't all need to be completely redone without float but I am willing to do so if that's the only answer.
The image I'm using is this:
You don't have to completely redo it. Just a couple of small changes. Live example: http://jsfiddle.net/tw16/Pwmcn/
.buttonLarge {
height:22px;
margin: 0 22px 0 12px; /* add this */
}
.primaryLargeButtonEnd {
width: 12px;
height:12px;
padding: 0px 0px 0px 5px;
display: inline-block; /* add this instead of float:left */
background: transparent url('./composite__V153767378_.png') no-repeat left -75px;
}