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;
*/
}
Related
Lets start out by saying that I am not great at writing CSS...so this may require some patience
I was following this tutorial: https://css-tricks.com/float-labels-css/
And it was my first time seeing CSS written with the following syntax:
form {
width: 320px;
float: left;
margin: 20px;
/* This is the part I am confused about */
> div {
position: relative;
overflow: hidden;
}
}
Maybe this is a stupid question, but is this the same as
form {
width: 320px;
float: left;
margin: 20px;
}
form > div {
position: relative;
overflow: hidden;
}
?
I am trying to utilize this syntax but I cannot quite figure it out. Can someone explain it to me please? :) Also, does this syntax have a name? I am having trouble even looking it up. Thank you!
Look for scss/sass. You will then write .scss files and then compile those to .css. You can simply install it via npm and then tell your IDE to automatically compile the files on save - or will have to make npm watch the files if you editor doesn't support it. But yeah, simply look for "how to install scss"
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 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 have a Wordpress theme that create elements with dynamic class names. I don't want to mess the PHP code, so I want to make changes only on the CSS.
Every element has a code like this:
<dd class="variation-testing">Testing</dd>
I tried to use this CSS rule and it should have worked, but it seems that it doesn't applied the element at all:
dd.[class^=variation-] {
width: 48%;
float: left;
}
How can I add a CSS by using the first part of the class only?
Update:
The answer was simple and found in the comments. The right CSS is without the dot.
dd[class^=variation-] {
width: 48%;
float: left;
}
Yes, as stated in the comments the carat selector should be used.
dd[class^=variation-] {
width: 48%;
float: left;
}
Here is a reference for CSS attribute selectors:
https://www.w3schools.com/css/css_attribute_selectors.asp
I've built a page using Wordpress, and am now trying to modify is using CSS. I want to remove the top padding from a particular element on my page. After inspecting the culprit element (using Chrome-->Inspect Element), I see that it has a class of .content-area and a top-padding of 72px. Here is the relevant CSS info yielded by inspect element:
.content-area, .content-sidebar {
padding-top: 72px;
}
However, when I insert the following into my style.css:
.content-area{
padding-top: 0px;
}
the padding remains. Any thoughts on what I'm doing wrong, or how to resolve?
sometime time this property can be inherited by parent class so you can try to this code
.content-area, .content-sidebar {
padding-top: 72px !important;
}
Thanks all. I changed the CSS to:
#media screen and (min-width: 846px) {
.content-area {
padding-top: 5px;
}
}
and the padding disappeared. Other media queries in CSS aren't as intuitive, but at least this works for now.