I ran into a problem which some styles on my website don't seem working when viewing on a mobile device. Where is my website: https://www.chingpingyang.club/
When I open it with my phone the submit button for the price filter and the price for books are having different styles from when I open the site with my laptop. And seems not only these two are not the same...
Here is the code for the submit button.
input {
all: unset;
font-size: 0.8rem;
width: 50px;
height: 20px;
cursor: pointer;
text-align: center;
color: ${props => props.theme.primWhite};
background-color: ${props => props.theme.interactive};
transition: 0.2s;
&:hover {
background-color: ${props => props.theme.interactiveDark};
}
}
Thank you all so much in advance!
The issue does look to be button, but everything else. The button didn't change for me at all. Try this css below.
#media (max-width: 800px){
.sc-fzoyTs.jZUSDr {
flex-direction: column;
}
.sc-fzoNJl.fvpgSY {
width: calc(100% - 40px);
border: 1px solid #efefef;
padding: 1rem;
margin: 0 auto 3rem;
}
.sc-fzoLsD.fYZyZu,
.sc-fzqBZW.chhgrb {
width: 100%;
}
.gpozzs {
flex-direction: row;
flex-wrap: wrap;
}
.gpozzs label {
width: auto;
margin: 0 1rem 0 0;
}
}
I have figured out the problem. It's caused by the "all: unset" I applied to the button. So just simply remove it and use other ways to remove the default button style.
Related
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.
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;
}
so I'm using a gorgeous search bar component that I found on codepen in my react (CRA) project.
I have imported css in the default src/index.js
Then I have my search component which is composed of Search.js and Search.module.css.
Clearly Bootstrap styling and the Search component styling doesn't work together, when I comment the bootstrap file import in src/index.js, the Search component will be working fine.
So how can I override bootstrap only on my Search Component?
Here is the css of the Search.module.css
#import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
* {
font-family: Roboto, sans-serif;
padding: 0;
margin: 0;
}
.flexbox {
background: linear-gradient(155deg, #cccccc, #e8ecee, #d4d4d4);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.search {
margin: 20px;
}
.search>h3 {
font-weight: normal;
}
.search>h1,
.search>h3 {
color: white;
margin-bottom: 15px;
text-shadow: 0 1px #eaeff1;
}
.search>div {
display: inline-block;
position: relative;
}
.search>div:after {
content: "";
background: white;
width: 4px;
height: 20px;
position: absolute;
top: 40px;
right: 2px;
transform: rotate(135deg);
box-shadow: 1px 0 #eaeff1;
}
.search>div>input {
color: white;
font-size: 16px;
background: transparent;
width: 25px;
height: 25px;
padding: 10px;
border: solid 3px white;
outline: none;
border-radius: 35px;
box-shadow: 0 1px #eaeff1;
transition: width 0.5s;
}
.search>div>input::placeholder {
color: #5a5a5a;
opacity: 1;
}
.search>div>input::-ms-placeholder {
color: #efefef;
}
.search>div>input::-ms-input-placeholder {
color: #5a5a5a;
}
.search>div>input:focus,
.search>div>input:valid {
width: 250px;
}
As you haven't shared the code snippets. I am assuming the bootstrap search will be using: text and button tag. Now, the CSS of this would be coming from bootstrap.
You can do the following:
1) Make a search component level class eg "search-module"
2) Now, create css or scss file import in the search component and within that css
override the bootstrap css by :
.search-module input[type=search] {...}
OR
3) you can do this overriding on your main style.css file too.
You need do to step 2 for all the other conflicting classes, tags, and IDs in the bootstrap with the search component.
PS: This will bloat your CSS. Best would be if you can just pick that part of Bootstrap which is required and rest you write your own style.
Thank you.
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 know that we can modify the design by making changes to botchat.css as per our requirement. Now, I want to know that can each button be of different color as shown in the image.
[button1] [button2] [button3]
All the buttons must be of different colors.
In your custom.css or whatever your custom CSS file name is you can address this by using CSS like this to account for the maximum amount of buttons you will produce on a card:
.wc-card button:nth-of-type(3) {
background-color: green;
color: #0078d7;
min-height: 32px;
width: 100%;
padding: 0 16px;
}
.wc-card button:nth-of-type(2) {
background-color: red;
color: #0078d7;
min-height: 32px;
width: 100%;
padding: 0 16px;
}
.wc-card button:nth-of-type(1) {
background-color: orange;
color: #0078d7;
min-height: 32px;
width: 100%;
padding: 0 16px;
}
...
This CSS will produce this result: