Shop Categories

X

Responsive, text colors and css style questions

Home Forums Agama Pro Responsive, text colors and css style questions

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #26773
    Diego Letelier
    Participant

    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.

    https://prntscr.com/siyf5o

    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.

    https://prntscr.com/siyem1

    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?

    https://prntscr.com/skpvwl

    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?

    https://prntscr.com/siyew1

    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

    Here 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.

    #26777
    Zex
    Moderator

    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.

    https://prntscr.com/siyf5o

    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.

    https://prntscr.com/siyem1

    /*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?

    https://prntscr.com/skpvwl

    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?

    https://prntscr.com/siyew1

    /*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

    #26789
    Diego Letelier
    Participant

    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.

    #26791
    Zex
    Moderator

    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

    • This reply was modified 2 years, 1 month ago by Zex.
    #26816
    Diego Letelier
    Participant

    Thank you!!!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.