CSS code not responsive

[ArtOfSpring]

Hello Support Team,

I have a question abut my CSS Style sheed.
I wandet to make some new Colors und a Background image in the cateory sites of my online shop.
So I put it in the generell custom CSS sheed. And it worked out but when I lokk at the shop on mobil phones or tablets it’s still white and overwrites my changes with the normal style before.

How can I fix this problem? can you help me out?

This is one example site. http://artofspring.garten-kiste.de/produkt/ersatzteile-gardena-elektro-bodenkruemmler-250-mit-kreiselrechen/

Thank you for your help.

[christian]

Hey @ArtOfSpring,

You did not close your media query so its taking effect on all the codes below it. You will need to close with }

Hope that helps.

[ArtOfSpring]

Thank you, that was exactly the problem!

But I found another wired thing: In some pages I have become a second scroll bar. For example in this page: http://artofspring.garten-kiste.de/produkt-kategorie/ersatzteile-gardena-system/bodenhacken/

You know what causes this? Never put in a code or something for this…

Greetz

[Prasant]

Hello Greetz,

Thanks for updating thread.

On my end I don’t see double scrollbar. Have recorded a screencast that you can take a look. Please try clearing browser cache and see how it goes. https://cl.ly/1n0d0E2W3t2Q

However, One issue that I spotted is that that result count is not properly visible because of the the background and it’s own text color. Have highlighted the same in above screencast. To fix that, you can add following CSS under Pro > Theme Options > CSS:

.woocommerce-result-count {
    color: #fff;
    border-color: #fff;
}

You can change the color code as per your requirement.

Thanks.

[ArtOfSpring]

Thank you for your help. I’m still new in CSS styling but I like it.
I guess you can not see the second scroll bar because you use a desktop and I use a Laptop.

I try to go further. When I got more questions I would like to ask you again if it’s ok for you!

Thanks so far!!!

[jade]

You’re most welcome.

[ArtOfSpring]

I found anaother thing wich I don’t Really know how to fix it. I hope you can nhelp me once again with this issue.

I have a corporate Design on the Online Shop wich has a green Section with Top Separator and a normal Button in it. This Seactin is repating on every Site of the Webshop. You cann see it here for example (the last section before the footer starts)

My Question is know: How can I get this section also added to my woocommerce sites like a single Produkt or a whole category pages like this

I really hope you can help me out. Thanks for your time anyway

[friech]

Hi There,

While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

First, you’ll need a child theme, so please setup a Child Theme

Then re/create your section as a Global Block (X > Global Blocks), this way you can do your edits in just one place in the future. Take note of the shortcode of the Global Block that you created.

Then add this to your child theme’s functions.php file.

function add_global_block() {
	echo do_shortcode('YOUR GLOBAL BLOCK SHORTCODE HERE');
}
add_action('YOUR HOOK HERE', 'add_global_block');

Replace the YOUR GLOBAL BLOCK SHORTCODE HERE with the shortcode of your Global Block. And replace the YOUR HOOK HERE with your actual hook (depends on where do you want to position your Global Block). Please refer to the following article for Hook Guide.

WooCommerce Visual Hook Guide: Single Product Page
WooCommerce Visual Hook Guide: Archive / Shop / Cat Page

Hope it helps,
Cheers!

[ArtOfSpring]

Hello @friech,

thank you for this good idea. I tried It and for my surprise t worked out. But I still have a Problem: Now the section is integrated on all sites but it’s in the boxed container of the shop page: see here.

Is there any CSS code I cann use that it would be displayed fullwidth?

Thank you for your Time and help. So far it was a good way to handle this issue. just missing one thing right now…

[jade]

Hi there,

Please try this code in the Global CSS:

.woocommerce.archive .x-container.offset {
    max-width: 1300px;
    width: 100%;
}

Feel free to adjust the values in the code.

---

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

[ArtOfSpring]

Hi there,

Yes that’s exactly what I’ve tried too… The Prblem is that the Products and category blogs also going to 1300px or 1920px or what ever.
I guess I have to find another solution. for this problem.

But thank you for your help! Keep on in that way!

[friech]

Hi There,

@ArtOfSpring

The Prblem is that the Products and category blogs also going to 1300px or 1920px or what ever.

That is confusing, the CSS code given by Jade should not affect the Product page nor Category blogs page. Please clarify the issue.

I don’t see your Global Block section on the Product category page, did you remove your PHP code? Please add it back so we can take a look and understand the issue better.

Cheers!

[ArtOfSpring]

Hey friech

I put it back on the side as you wanted and put in the CSS code of Jade.
In the Screenshot below you can see my problem. Everytime when I change the size of the max-width string it changes it for all of the site. Can you tell me what I am doing wrong or fix it when it’s just easy???

Thank you really for your help. Going crazy with this thing ^^

[paul.r]

Hi,

You can try this code instead.

function add_global_block() {
    if(is_product_category()){
             echo do_shortcode('YOUR GLOBAL BLOCK SHORTCODE HERE');
    }
}
add_action('x_before_view_global__footer-widget-areas', 'add_global_block');

Hope that helps

[ArtOfSpring]

Hello @paul.r,

I have tried to add this code instead but it didn’t worked out. Now it is showing nothing anymore at this space in the frontend.
After this I tried to switch on a widget area for the footer in the customizer in case that it has something to do with your code but still nothing.

Thank you for your patience with this issue. Seems like it can’t be fixed^^…maybe there is something missing in your code to display the section?

[Alaa]

Hi ArtOfSpring,

I understand that you want to show this Global Block cs_gb id=1388 on WooCommerce Product Category archives pages only. If that’s right, then please create this file in your child theme directory:
(/pro-child/framework/views/integrity/woocommerce.php) with this content:

<?php

// =============================================================================
// VIEWS/INTEGRITY/WOOCOMMERCE.PHP
// -----------------------------------------------------------------------------
// WooCommerce page output for Integrity.
// =============================================================================

?>

<?php get_header(); ?>

  <div class="x-container max width offset">
    <div class="<?php x_main_content_class(); ?>" role="main">

      <?php
		if (is_product_category()){
			
			woocommerce_content(); 
			echo do_shortcode('[cs_gb id=1388]');
		}

		else {

			woocommerce_content(); 

		}
      ?>

    </div>

    <?php get_sidebar(); ?>

  </div>

<?php get_footer(); ?>

This will only show cs_gb id=1388 on WooCommerce category product archives only.

Thanks.

[ArtOfSpring]

Hey Alaa,

Did it but it still has the same problem…the global block is not shown in fullwidth.
I guess we can not fix this problem without destroying the boxed layout of the categroies and products…

So I need to find another design solution to show the user an option to go back to the shop and to have a nice optical breaker between main content and footer menu.

But thank you realy much for your help, for all of you!!! your the best!

[jade]

You are most welcome!

Have a great weekend.