I am using ReadMore.js on my website, it is a plugin that creates a "readmore/close" button that toggles the visibility of content.
Currently the 'read more' button is aligned to the left under the article it collapses. An example of this code is on http://jedfoster.com/Readmore.js/. I would like the button to align to the right.
I have looked through the documentation, there doesn't seem to be any configuration that allows me to change the alignment. The code that is produced by the script doesn't have a class attached:
Read More
Is there a way of creating a class that targets the 'data-readmore-toggle'?
I found a way:
[data-readmore-toggle^="rmjs"] {
text-align: right;
}
This targets all the datatypes that begin with rmjs.
article + [data-readmore-toggle] {
text-align: right;
}
OR
[data-readmore-toggle] {
text-align: right;
}
Here is a fix
a.article.atn {
text-align: right;
}
Or
a{
text-align:right
}
Related
I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }
Having a bit of an issue with a Drupal site. If you take a look here and look down at the facebook block, it's overlapping the blocks above it, the twitter one is not doing this. I have tried various changes in Drupal but nothing has changed. Anyone have any idea how to make it line up with the twitter one?
It is the two margin top properties asigned to the .block-facebook-wall. Disable those.
.block-facebook-wall {
/* margin-top: -7.36714em; */
}
media (min-width: 38em){
.block-facebook-wall {
width: 48.93617%;
clear: right;
float: right;
margin-right: 0;
/* margin-top: -6.8541em; */
}
}
I want to open a subbreddit in hebrew and i want to "mirror" the site using the css sytlesheet so it will fit nicely with the hebrew. I want that the tree structure of the comments will be aligned to the right.
here is an example of what i want to achieve:
before:
image1
after (with damaged text):
image2
so, i want to make the structure of the site to look like in image2, but without damaging the text.
is it possible?
update:
here is the css code that i have right now:
there could be non-relevant selections, i'm just experimenting withe the stylesheet by trial and error:
.thing {
display: inline;
}
.sitetable {
display: inline;
}
div.content {
display: block;
float: right;
}
body {
direction: rtl;
}
.midcol.likes {
float: right;
}
Update2: solved!
i added this line and it fix it:
.child {
padding-right: 25px;
}
solved! i added this line and it fix it:
.child {
padding-right: 25px;
}
I'm experiencing some difficulties understanding what is happening here:
The green color and hover effect is being applied to the add to cart button on the products list page
http://www.jkadengeart.com/gallery/
but is not being applied to the add to cart button on the single product pages
http://www.jkadengeart.com/gallery/p...n-prints-only/
Also, when I do float:left, the button still remains flush right.
Your help is very much appreciated.
Issue 01
In gallery page you are giving green color exlusively for #mp_product_list input.mp_button_addcart
But there is no div with the same ID in single page.
So, Add or remove the ID
like
input.mp_button_addcart {
...
}
or
#mp_product_list input.mp_button_addcart,
#single_container input.mp_button_addcart {
...
}
Issue 02
Float left is not working because you have given float:right to form
form.mp_buy_form {
float: right;
}
Change it to left
form.mp_buy_form {
float: left;
}
Like this please add below selector position:absolute;
css
#mp_product_list input.mp_button_addcart {
margin: 0 0 50px;
position: absolute;
}
.mp_grid .mp_product_detail {
margin-top: 63px;
vertical-align: top;
}
I'm trying to do a simple header like so:
Here's my bare bones code:
http://www.ogmda.com/test/help.html
I just can't seem to get the LOGO, NAV, and SOCIAL ICONS items to float correctly using BS3's baked in code. Can someone help start me on the right foot? How would you write the code? Thanks!
adding the following seems to do it for me:
h1 { float: left; }
.list-inline { text-align: right; }
.nav-pils { float: right }