Docs

[venya]

Hello X-Geniuses!

I have a several additional formatting issues and could use some help.

1. On my contact page I have a full screen background image and have made the section backgrounds a semi-transparent blue. At the very top and bottom of the page the blue doesn’t quite extend leaving a horizontal bar of just the background image. How can I make the blue cover the entirety of the page? http://www.bennyfromtheblock.com/contact/

2a. Checkout page http://www.bennyfromtheblock.com/checkout/

I have formatted the checkout fields with a different font, but was unable to change the 2 fields that are dropdown menus: Country, and State. I’d like the title of the fields to be the same as the other fonts, and also format the dropdown options.

2b. On that page, I used the code below to format the rest of the fields on checkout. There are 2 widgets on my sidebar that are also effected by this code, and I would like them to remain as they were. They are product search, and the email field of the mailchimp form.

.woocommerce-account form select, .woocommerce-account form textarea, .woocommerce-account form input[type=”text”] .woocommerce-account form input[type=”tel”], .woocommerce-account form input[type=”text”], .woocommerce-account form input[type=”email”], .woocommerce-account form input[type=”password”], .woocommerce-checkout form select, .woocommerce-checkout form textarea, .woocommerce-checkout form input[type=”tel”], .woocommerce-checkout form input[type=”text”], .woocommerce-checkout form input[type=”email”], .woocommerce-checkout form input[type=”password”] {
font-size:20px;color:black;font-family: “Lato”,”Helvetica Neue”,Helvetica,sans-serif;
width: 100%;
}

3. Cart widget in sidebar. I have selection the option to hide the cart when empty, however the widget title label “Cart” remains visible even when cart is empty and the rest of the widget it hidden. I think this must be an error or oversight? How can I hide the word “Cart” as well along with the rest of the widget?

4. For some reason the formatting of my mobile menu has stopped working. I’ve checked the code on csslint for errors, and there were none. How can I restore the mobile menu formatting as seen in photo?

.x-navbar .mobile .x-nav>li.x-menu-item-woocommerce>a {
background: transparent !important;
}
.x-navbar .mobile .x-nav>li>a.x-btn-navbar-search {
background: transparent !important;
color:#000 !important;
-webkit-box-shadow:inset 0 0 0 3px rgba(0,0,0,1);
box-shadow:inset 0 0 0 3px rgba(0,0,0,1);
}

5. Portfolio filters: Is it possible in X to format the filter buttons so that the active one is a different color?

6. On my product single page in tablet, How can I position images on the left, and product title/price to the right of the photo? Can it be don’t by creating 2 columns? Essentially I’d like tablet product single to look like it does on desktop. (see photo).

Thank you very much guys!

[venya]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in!

1] Please edit your page and make sure that the section has no padding. The padding creates a space and this is why the blue overlay is not covering the whole page section content. There is also a space above the page section content. This is a conflict with your code of the logo. To be able to resolve it, you need to reduce the margin-top of the logo or use this code:

.x-navbar .x-brand {
    margin-top: 0;
}

PS. this will also affect the position of the logo becauase you have another code that sets the top and left position of the logo

2a] You need to use these selectors:

.woocommerce .woocommerce-checkout #s2id_billing_country
.woocommerce .woocommerce-checkout #s2id_billing_state 

2b] You need to update your code and make use of this instead:

.woocommerce .woocommerce-account form select, 
.woocommerce .woocommerce-account form textarea, 
.woocommerce .woocommerce-account form input[type="text"],
.woocommerce .woocommerce-account form input[type="tel"], 
.woocommerce .woocommerce-account form input[type="text"], 
.woocommerce .woocommerce-account form input[type="email"], 
.woocommerce .woocommerce-account form input[type="password"], 
.woocommerce .woocommerce-checkout form select, 
.woocommerce .woocommerce-checkout form textarea, 
.woocommerce .woocommerce-checkout form input[type="tel"], 
.woocommerce .woocommerce-checkout form input[type="text"], 
.woocommerce .woocommerce-checkout form input[type="email"], 
.woocommerce .woocommerce-checkout form input[type="password"] {
	font-size:20px;
	color:black;
	font-family: “Lato","Helvetica Neue",Helvetica,sans-serif;
	width: 100%;
}

3] I am not seeing the Cart title in the sidebar. This is how it looks like on my end; http://prntscr.com/bhroj8

4] To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 979px) {
    .site .x-navbar .mobile .x-nav>li.x-menu-item-search,
    .site .x-navbar .mobile .x-nav>li>a.x-btn-navbar-search,
    .site .x-navbar .mobile .x-nav>li.x-menu-item-woocommerce>a {
        margin-top: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .site .x-navbar .mobile .x-nav>li.x-menu-item-search {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

Hope this helps.

5] To resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (min-width: 797px){
  ul.x-portfolio-filters-menu a.x-portfolio-filter.selected {
    font-family: "Lato","Helvetica Neue",Helvetica,sans-serif!important;
    background-color: #0053AD!important;
    font-weight: 600;
    border: solid!important;
    border-color: #0053AD!important;
    color: white!important;
  }
}

6] The title and the rest of other product information below it is with the same column. The screen will be divided and the right column would not look great. http://prntscr.com/bhrroz

Hope this helps.

[venya]

Hello,

Thanks for your help. I still have the following issues.

#1 I was able to expand the blue to top and bottom with adding to cornerstone css:
.x-navbar .x-brand{
margin-top:-5px;
}
I’m having trouble getting the same results for my mobile site. Everything below 768px width has the golden background image showing on section 1 of contact page.
http://www.bennyfromtheblock.com/contact/

2a. I added below to my old code:
.woocommerce .woocommerce-checkout #s2id_billing_country
.woocommerce .woocommerce-checkout #s2id_billing_state

This corrected the two label font. How do I apply the same style to all the items in the dropdown menu (eg. list of States, countries)?

2b. I tried replacing with your new code, however that made all formatting go away – leaving like there wasn’t any to begin with. I put back old code for the moment. I still would like to prevent the two fields in the sidebar from being affected by the checkout field formatting…

#3. Indeed, for the most part the “cart” label is not visible when cart is empty. I’m still getting it sometimes… Here’s a page where I found it appearing
http://www.bennyfromtheblock.com/about-ru/ (see word “Корзина”)

I contacted woocommerce about this and they said:

“Theme issue which occurs if your theme does not output widget classes per widget. e.g. .widget and .widget_shopping_cart”

Is this info helpful to prevent any further occurrences of the label when cart is empty?

#4. I’ve nearly got it! On my mobile menu cart the corners of the cart button have a blue background. I can’t seem to get this to go away. How can this be done?

#5 Worked great!

Thanks!

[Rad]

Hi there,

1. Try removing the background image from your first section. I don’t see it in desktop and since you don’t want to see in mobile, then it’s best to remove the background 🙂

2a. They aren’t normal drop-down list, try this selector

.select2-results .select2-result-label

2b. How about this,

.woocommerce-checkout input, .woocommerce-checkout select {
	font-size:20px;
	color:black;
	font-family: “Lato","Helvetica Neue",Helvetica,sans-serif;
	width: 100%;
}

3. But they check the source code of the site to see if .widget and .widget_shopping_cart are there. And they are there,

<div id="woocommerce_widget_cart-5" class="widget woocommerce widget_shopping_cart"><h4 class="h-widget">Корзина</h4><div class="hide_cart_widget_if_empty"><div class="widget_shopping_cart_content"></div></div></div>

There is no modification added on widgets, and there is no way X theme could override woocommerce widgets. In fact, it’s working on other pages like from here http://www.bennyfromtheblock.com/product-category/new-arrivals-ru/. And I did notice that fonts here http://www.bennyfromtheblock.com/about-ru/ are too small compared to other. Which means, the issue could be from malformed content that breaks the structure of the sidebar. Please check your content if you have elements with no proper closing, formatting, or opening.

4. Add this too,

@media(max-width: 979px) {
.x-btn-navbar-woocommerce {
background: #fff !important;
}
}

Cheers!

[Author]

Posts