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 }
Related
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
}
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've been trying to use Firebug to inspect the elements on my page to see why the pruduct image is dropping down below the configuration box on the right instead of being near the top of the page without much luck. Can anyone see what the issue is?
I've asked the theme developer and they said that Cart2Quote plun breaks the Argeto layout. I'm sure I can tweak the CSS and fix this but I can't find the issue. Can anyone see the problem?
http://dev.globalamericaninc.com/index.php/le-37i-g-3-5-embedded-mini-board-with-intel-skylake-6th-gen-core-h-series-processor.html
you must have an element (or more) that has {clear : left} or {clear : both} in the right side. Google what clear does in CSS
change below CSS rules:
default.css line 742
.product-view .product-img-box {
float: left;
width: 445px;
}
default.css line 746
.product-view .product-shop, .col1-layout .product-view .product-shop {
float: right;
/*
float: none;
margin-left: 385px;
width: auto;
*/
}
I am using a edit CSS extension from the slim jetpack plugin for my wordpress project. Unfortunately it is placed on the internal server so I cant share the link with you.
The issue: I have a round 30 sub-menus to present under the menu on the header. Decided that the best way would be to use custom CSS to edit that specific menu instead of changing all the menus look.
So i followed the guide presented here:
added the sub-menu-columns as a custom CSS class on the desired menu
and added this to my CSS file:
.sub-menu {
width: 410px;
}
.sub-menu-columns ul.sub-menu li {
display: inline-block;
float: left;
width: 200px;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
float: left;
margin-right: 10px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
float: right;
}
I am ended up with all the sub menus being 410px wide (instead of original 184px). And the sub-menus in the desired place are still in one column but simply have spaces on right and left sides.
I am new to CSS but it seems that the first .sub-menu declaration is wrongly placed here as it affects all the sub-menus. As well i am struggling to get 2 sub-menu items on the same row.
I kinda understand where are the "legs" growing from but it seems i am missing something here.
I searched for the similar cases but could not find clear explanations on this subject.
Would appreciate any help.
After some research i found that a
.sub-menu class
had clear: both; defined that caused the issues.
This the code i ended up which worked perfectly fine:
.sub-menu-columns ul.sub-menu li {
clear: initial;
float: left;
width: 50%;
}
Just in case someone comes here looking for a similar solution, here is what worked for me, on WordPress 5.7, theme Chaplin:
#media (min-width: 999px) {
.submenu-columns>ul {
width:50rem;
}
.submenu-columns>ul>li {
width:50%;
float:left;
}
.submenu-columns>ul>li a {
width:100%;
}
.submenu-columns.odd>ul>li:last-child {
width:100%;
}
}
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;
}