Responsive, text colors and css style questions
- This topic has 4 replies, 2 voices, and was last updated 3 years ago by
.
-
Posts
-
Hello Zex!
On the mobile view, when you buy something, on the cart, the column of the price and resume is too far on the right.
One step further, when the client hast to write order details, it is shown in two columns. Can it be in one? So the last one will be below the client details.
On the tablet view and mobile view:
On the blog page, the blog itself is acting weird, goes on the right side, uncentered. Has something to do with the css style? If not, what is it?
On the tablet view, the head and the page itself is changing with sizes depending on if I scroll down or not on the page.
I am not able to see this error now, I don’t have a tablet at the moment. I will appreciate if you can check it anyway.
The text in the box of the different payment ways, could be black?
The text of the last page when you buy a product is blue, too dark, could the color be changed like other titles and texts before?
https://prntscr.com/skpk73
https://prntscr.com/skpkkp
https://prntscr.com/skpkmvHere is the CSS for this website, for you to check:
#top-bar{
background-color:grey!important;
}
#top-social ul li a {
color:white!important;
}
.agama-primary-nav,
#agama-logo img{
float: none!important;
display:inline!important;
}
.agama-primary-nav {
float: none!important;
left:26%!important;
max-width: 65%!important;
}
.top-links {
margin-left:37%;
}
#top-bar .pull-left{
float:none!important;
}@media (max-width:992px) {
.sticky-header.sticky-header-shrink {
position: fixed!important;
height:80px!important;
}
nav.mobile-menu {
position: fixed!important;
width: 100%;
top: 70px!important;
height: 250px!important;
overflow: auto!important;
z-index:9999;
}
}#masthead .agama-primary-nav .sub-menu-item a {
font-size: 14px!important;
}
@media only screen and (min-width: 993px) {
#agama-logo .logo-mobile{
display: none!important;
}
}
@media only screen and (max-width: 992px) {
#agama-logo .logo-desktop{
display: none!important;
}
}
@media (max-width: 767px){
ul.products.columns-3 {
display: flex;
flex-flow: row wrap;
}
.woocommerce ul.columns-3>li {
width: 47%!important;
}
}
/*remove the magnified glass on hover*/
.woocommerce div.product div.images img.zoomImg{
display: none!important;
}
/*Cart total colors*/
.cart_totals td,
.cart_totals h2{
color:white!important;
}/*mobile view one column*/
@media (max-width: 560px){
ul.products:not(.columns-1) li {
width: 100% !important;
}
}
/*footer widgets width fix*/
@media (max-width: 479px){
.container {
width: 100% !important;
}
}
/*Hide filtering*/
.woocommerce .product_filtering{
display:none!important;
}/*Tab titles color*/
.woocommerce-tabs .tabs li a{
color:white!important;
}
/*Related Products title color*/
.single-product .related.products h2{
color:grey!important;
}
.inner_product img{
opacity: 0.9;/* set this value 0-1*/
}
.woocommerce .products li{
background:rgba(255,255,255,1.0); /*Use this for white semi transparent background color:rgba(255, 255, 255, 0.80)*/
}
/*Checkout tiltle color*/
.woocommerce-checkout h3 {
color:white!important;
}
/*Checkout label title color*/
.woocommerce-page form .form-row label {
color:orange!important;
}#footer-wrapper .site-info{
text-align:center;
width:100%!important;
margin:10px auto;
}
#footer-wrapper .social {
float: right;
}Best regards.
Hello, Diego!
Here are the answers for you:
On the mobile view, when you buy something, on the cart, the column of the price and resume is too far on the right.
One step further, when the client hast to write order details, it is shown in two columns. Can it be in one? So the last one will be below the client details.
/*Total de carrito and Detalles de facturation width on mobile */ @media (max-width: 560px){ .woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals, .woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2{ width:100%!important; } }On the blog page, the blog itself is acting weird, goes on the right side, uncentered. Has something to do with the css style? If not, what is it?
You need to check your premium-blog widget settings, or you can add the following code to fix the problem:
.premium-blog-post-outer-container{ position:relative!important; }On the tablet view, the head and the page itself is changing with sizes depending on if I scroll down or not on the page.
I am not able to see this error now, I don’t have a tablet at the moment. I will appreciate if you can check it anyway.
I don’t see any problem there, Can you be more precise?
The text in the box of the different payment ways, could be black?
/*Payment method description font color*/ .woocommerce-page #payment div.payment_box p{ color:black!important; }The text of the last page when you buy a product is blue, too dark, could the color be changed like other titles and texts before?
https://prntscr.com/skpk73
https://prntscr.com/skpkkp
https://prntscr.com/skpkmv/*WooCommerce Order details colors*/ .woocommerce-page .order_details li strong{ color:white!important; } .woocommerce-bacs-bank-details{ color:white!important; } .woocommerce-order-details h2, .woocommerce-checkout .woocommerce h2{ color:white!important; } .shop_table.order_details tfoot{ color:white!important; }Regards
Most of the css worked. I fixed the blog issue by changing the template of the page. The default one was giving this weird response. Anyhow, many thanks!
Just one more question.
There is any way to downsize one or two titles for a specific woo-commerce product? The issue is, they don´t get align on the shop page on the bottom side. Just two of them are a little bit longer than the others. Or maybe, you have a better idea to solve this little detail?
Best regards.
Hello, Diego!
You can change the product title globally:
/*Product titles font size globally*/ h2.woocommerce-loop-product__title{ font-size:20px!important; }…or just for particular products.
In this case, you need to find the exact post-# for the product and add it before the selector:/*Product title font size particularly*/ .post-328 h2.woocommerce-loop-product__title, .post-594 h2.woocommerce-loop-product__title { font-size:18px!important; }Use the code you want.
Please let me know If you need a help to discover the particular product post # (give me the product name and I will give you the right code)
Regards
- You must be logged in to reply to this topic.