How do I open the checkbox below the button instead of above the button? I tried everything but nothing works. I edit in wordpress wooocommerce at custom css. if someone could help me that would be great.
.yith-wapo-block {
display: none; /* make the block invisible by default */
}
#media only screen and (min-width: 992px) {
#custom_button {
background-color: #d26e4b;
color: white;
font-weight: bold;
margin-left: 107px;
margin-top: -40px;
margin-right: 1px;
width: 208.5px;
}
}
#media only screen and (max-width: 991px) {
#custom_button {
background-color: #d26e4b;
color: white;
font-weight: bold;
margin-left: 99px;
margin-top: -40px;
margin-right: 1px;
width: 208.5px;
}
}
#custom_button:active + .yith-wapo-block, #custom_button:focus + .yith-wapo-block {
display: block;
}
I tried that but it did not work
#custom_button {
background-color: #d26e4b;
color: white;
font-weight: bold;
width: 208.5px;
position: fixed;
top: 0;
}
I tried that but it did not work
.yith-wapo-block {
display: none; /* make the block invisible by default */
}
#custom_button:active + .yith-wapo-block, #custom_button:focus + .yith-wapo-block {
display: block;
margin-top: 20px;
}
How do I open the checkbox below the button instead of above the button? I tried everything but nothing works. I edit in wordpress wooocommerce at custom css. if someone could help me that would be great.
Related
I have some social media links in the footer here that are styled to be in circles: https://milfordpa.us
Everything looks good on Chrome, but on Safari, the last one appears to get "cut off" and I can't seem to figure out why.
Here is my current SCSS:
.social-links {
display: block;
float: right!important;
a {
border-radius: 50%;
padding: 10px 11px;
font-size: 20px;
background: $color3;
color: $color2;
margin-left: 5px;
&:hover {
background: $color4;
color: $color2!important;
}
}
i {
width: 21px!important;
height: 20px!important;
text-align: center;
}
}
Thank you in advance for your help!
In one of your parent elements for .social-link you're changing the width to something that safari seems to struggle with.
A quick fix is to reapply the width on .social-link
.social-link {
text-align: right;
min-width: -webkit-fill-available;
}
I'm using WP RSS Aggregator, and I've styled the feed into containers, along with creating a 3 column layout. Limiting the feeds to 18 per page, I'm experiencing overflow issues. Setting the CSS to overflow:hidden !important; has not resolved the issue. Being the length of each feed item varies, I'm hoping for a solution that will carry through each feed category. Below is a link to the feed page, followed by the CSS I've implemented for feed imports into their respective pages. Thank you in advance for your help.
enter image description here
div.wprss-et-social-buttons {
display: none;
}
.thumbnail-excerpt img{
float: none !important;
}
.thumbnail-excerpt {
text-align: center;
}
li.feed-item{
overflow: hidden !important;
border: solid #000 2px;
border-radius: 5px;
padding: 10px;
width: 250px;
background: #eee;
}
.thumbnail-excerpt {
overflow: auto !important;
}
wprss-feed-excerpt{
font-size: 16px;
text-align: center;
}
li.feed-item > a{
font-size: 23px;
text-align: center;
}
ul.rss-aggregator{
column-count: 3 !important;
list-style-type: none;
}
#media only screen and (max-width: 980px) {
ul.rss-aggregator {
column-count: 2 !important;
}
}
#media only screen and (max-width: 479px) {
ul.rss-aggregator {
column-count: 1 !important;
}
}
I've got an online submit to email form, but some people may want to just print the page. I used the #media print query with CSS and when I tried to print the page my printer printed a couple lines and then stopped. It said "unable to send data to printer". Should I try something else entirely or is there a way to make this work? There is JavaScript validation but the page prints okay if I don't try to adjust the styles, so I don't think that's a factor. Without any adjustments it takes two pages to print and doesn't look fantastic.
This is my CSS:
#media print {
.online {
display: none;
}
.print {
display: block;
}
.container {
min-height: 0px;
}
.content {
min-height: 0px;
border: none;
margin-bottom: 0px;
-webkit-box-shadow: none;
box-shadow: none;
}
nav {
display: none;
}
.dance h3 {
color: black;
font-size: 18px;
}
.contact {
padding: 20px 0 10px;
border-top: 1px solid black;
border-bottom: none;
margin-bottom: 0px;
}
.item-bid {
margin-bottom: 30px;
}
fieldset {
font-size: 12px;
border: 1px solid black;
}
label {
font-size: 12px;
}
input, textarea {
display: none;
}
form p {
font-size: 12px;
}
.description {
padding-bottom: 100px;
}
}
If you're using Chrome you might want to output a PDF via the printing dialog box, and see if there any noticeable errors.
How do I change the spacing (between lines/paragraphs) in my mobile footer - css? Code below is from responsive.css wordpress
this is from the responsive.css part of my wordpress
I want the spacing to be closer than what it is currently - you can check it by visiting www.hotdatajobs.digitalya.ro
/* new changes footer */
#media ( max-width: 640px ) {
.col-xs-12.p-t-20.padding-l-r-10 span {
font-size: 18px;
}
.site-footer {
padding-top: 40px;
}
.footerRow .col-md-15.col-sm-15.col-xs-12 .title-block {
margin-bottom: 10px;
}
.m-h-f {
min-height: 295px;
}
.m-h-l {
min-height: 170px;
}
}
#media ( max-width: 440px ) {
.m-h-f,
.m-h-l {
min-height: 100px;
margin-bottom: 20px;
}
.m-h-f {
min-height: 230px;
}
.p-l-f {
width: 150px!important;
}
.site-footer .footerRow .footer-social-item {
font-size: 16px;
}
.site-footer .footerRow a {
font-size: 14px;
}
.col-xs-12.p-t-20.padding-l-r-10 span,
.site-footer .title-block {
font-size: 16px;
}
}
#media ( max-width: 374px ) {
.m-h-f,
.m-h-l {
min-height: 100px;
margin-bottom: 20px;
}
.m-h-f {
min-height: 225px;
}
.p-l-f {
width: 110px!important;
}
.footerRow .col-xs-12 {
padding: 0;
}
.site-footer .footerRow .footer-social-item {
font-size: 14px;
}
.site-footer .footerRow a {
font-size: 12px;
}
.col-xs-12.p-t-20.padding-l-r-10 span,
.site-footer .title-block {
font-size: 14px;
}
}
/* end general */
You can control spacing between lines of texts with the line-height property.
For example, 16px font-size and 4px distant from the bottom and upper lines:
line-height: 24px; /* 4px +16px + 4px */
Or with em units
line-height: 2em; /* 1em = 12px in this case. 24/12 == 2 */
So..
.site-footer .footerRow .footer-social-item {
font-size: 16px;
line-height: 24px;
}
Of course, increasing of decreasing the line-height depending on how much spacing you want. Anything below 16px will cut off your text because you are using 16px text so keep that in mind.
Also keep in mind that when the width of that div gets greater than 440px the line-height value will not apply.
I have a class for a button:
.client-header button {
/*Properties*/
}
and a class to detect when the menu is open:
.client-menu-open {
/*Properties*/
}
I would like to change the button background based on whether or not the menu is open. I want something like this:
.client-header button .client-menu-open {
/*Properties*/
}
But the classes are in two different files, so it doesn't work. Is there any way to do this across different files?
Here is the code for the header index.css:
#import url('../menu/index.css');
.client-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
overflow: hidden;
border-bottom: 1px solid #7E7E7E;
background: #cccccc;
}
.client-header button {
float: left;
height: 100%;
border: none;
border-right: 1px solid var(--border-color);
border-radius: 0;
box-shadow: none;
line-height: 39px;
background-color: #444444;
color: #FFF;
}
.client-header button:hover {
background-color: #555555;
}
.client-header button:active {
background-color: #4E4E4E;
}
.client-header-caption {
float: left;
}
.client-header-title,
.client-header-subtitle {
margin-left: 10px;
}
.client-header-title {
line-height: 25px;
}
.client-header-subtitle {
font-size: 0.5rem;
line-height: 15px;
}
#media (min-width: 640px) {
.client-header-title,
.client-header-subtitle {
display: inline-block;
line-height: var(--header-height);
}
.client-header-title {
font-size: 1.5rem;
}
.client-header-subtitle {
font-size: 1rem;
}
}
.client-header .client-menu-open button {
background: #CCCCCC;
}
And here is the code for the menu index.css:
.client-menu {
position: absolute;
top: var(--header-height);
bottom: 0;
left: -var(--menu-width);
width: var(--menu-width);
border-right: 1px solid var(--border-color);
padding-bottom: var(--menu-footer-height);
overflow: hidden;
transition: left 0.2s;
}
.client-menu-open {
left: 0;
box-shadow: 0 0 30px var(--shadow-color);
background: #444444;
}
.client-menu-pinned {
box-shadow: none;
}
.client-menu-header {
height: var(--menu-header-height);
text-align: right;
background-color: #444444;
}
.client-menu-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: var(--menu-footer-height);
text-align: right;
}
And the HTML structure is:
<header class="client-header">
<button class="client-header-menu-toggle"/>
</header>
<div class="client-menu"/>
You can use #import like so (in your primary CSS stylesheet):
#import url('external.css');
/* external.css above will be loaded */
Refer to this documentation: http://www.cssnewbie.com/css-import-rule/
Link to the other file and style .client-menu-open
if this is your html
<div class="client-menu-open"> <!-- this class is here only if the menu gets opened, else, this div has no class -->
stuff
stuff
<div class="client-header-button">
<button></button>
</div>
</div>
the correct syntax is the following
button {
background:red;
}
.client-menu-open button {
background:blue
}
The #import rule allows you to include external style sheets in your document. It is a way of creating a style sheet within your document, and then importing additional rules into the document.
To use the #import rule, type:
<style type="text/css">
#import url("import1.css");
#import url "import2.css";
</style>
For more info refer here https://developer.mozilla.org/en-US/docs/Web/CSS/#import
your CSS selector is incorrect, that's why it doesn't work. It has nothing to do with where CSS styles are defined.
.client-header button .client-menu-open will only select the following elements:
elements with class="client-menu-open"
which are children of button elements
which themselves are children of elements with class="client-header"
.
what you want, I think, is
button elements
which are children of elements having "class=client-header" AND "class=client-menu-open".
the proper selector for those elements would be .client-header.client-menu-open button.