Docs

[Rad]

Hi there,

Please change this CSS,

a.x-brand.img {
    display:block;
    float: none;
    text-align: center;
}

to this,

a.x-brand.img {
    display: block;
    float: left;
    text-align: center;
}

and remove this

a.x-btn-navbar {
    float: left !IMPORTANT;
}

And please replace this CSS,

@media (max-width:767px){
.woocommerce li.product.first {
    clear: none;
}
}

with this

@media (max-width: 767px){
.woocommerce li.product:nth-child(even) {
clear: right !important;    
}
.woocommerce li.product:nth-child(odd) {
clear: left !important;    
}
}

Cheers!

[RaynardKyleGuzman]

Hi all! Need more help. I cannot resolve some issues on my site, yunoclothing.com
There are blank spaces on my shop page as if an invisible image is present. I provided an image. Also need to adjust my navbar. The menu list is located below the logo, should be inline instead of below. (Also visible in the image provided).

Any help will be appreciated. Thank you!

[RaynardKyleGuzman]

Hi all! Need help fixing the layout of my website yunoclothing.com
My shop page has blank spaces in between the product images, as if invisible product images are present. (I’ve attached an image) And I also need to make some adjustments with my navbar, the menu list is currently placed below the logo, is it possible to have it stay at the left side but in ab inline position with the logo. (also visible in the attached image).

Any help would be much appreciated, thanks!

[Lely]

Hi There,

To make the navbar button inline with the logo, please also add this custom CSS:

@media (max-width: 767px){
a.x-brand.img {
    display: inline-block;
    margin-left: 10%;
}
}

For the blank spaces, look for this custom CSS:

@media (max-width:767px){
h2.wc-nested-category-layout-category-title {
    float: left;
    width: 100%;
}
ul.subcategory-products.products li {
    width: 45%;
    float: left;
    margin-bottom: 0;
}
a.x-brand.img {
    display:block;
    float: none;
    text-align: center;
}
a.x-btn-navbar {
    float: left !IMPORTANT;
}
}

Update this part:

ul.subcategory-products.products li {
    width: 45%;
    float: left;
    margin-bottom: 0;
}

To this:

ul.subcategory-products.products li {
    width: 45%;
    float: left;
    height: 280px;
    margin-bottom: 20px;
}

Hope this helps.

[RaynardKyleGuzman]

The CSS on the navbar worked! thanks a lot! However, The shop page still had blank images when viewed on mobile. Should I post the entire custom CSS? I’ll attach an image how it looks on desktop (all 4 shirt images are displayed properly) and how it looks on mobile ( 1 product image is not visible) just for comparison. Thanks again!

[Joao]

Hi There,

I just checked your page on my Android Phone Firefox and the images are loading fine.

Please clean your mobile browser cache and test it again.

Thanks

[RaynardKyleGuzman]

Thanks! I did clean my cache and it worked, the images are now loading. I need to reduce the bottom margin of the product images when accessed through mobile. The margin is too big.

And another thing on the navbar, is it possible to have the search icon excluded when the menu options are collapsed. When viewed on mobile, the drop down menu to only contain the product categories. The search icon to remain on the right side of the logo, same as its location when viewed on the desktop. (I’ve provided an image.) And to change the background color of the drop down icon to black and the three lines to a white color. The Mobile look of the navbar would be very similar to the mobile appearance of reiss.com

Thanks!

[Joao]

Hi There,

1-

Please add the following code to Appereance Customizer Custom CSS

@media (max-width: 480px) {
ul.subcategory-products.products li {
    height: 180px;
}}

2- Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. If you would like just to exclude the search from the navbar please add the following code to Appereance Customizer Custom CSS

.x-navbar .mobile .x-nav>li.x-menu-item-search>a {
   display: none;
}

Hope it helps

Joao

[RaynardKyleGuzman]

Thanks, I’ll just try to find solutions to it. Another thing The 2 columns of the first category in my shop page seem to be out of line. The second column seem to be a little higher. (I’ve provided an image) Thanks again!

[Christopher]

Hi there,

The space belongs to image itself, please see http://yunoclothing.com/wp-content/uploads/2017/03/16196644_10155721007587699_343395269_o-1200×1200.png

Thanks.

[RaynardKyleGuzman]

Hi all! Need a little help again.

1. In the navbar, just need to change the background color of the collapsed menu (the icon with three lines present when the site is viewed in mobile) to black, currently its white.

2. Increase the size of the other images in the product gallery. ( I’ve provided an image)

3. And lastly, is it possible to have several images appear before the shop catalog. 1 image will be shown at a time then the next images just gradually fades in. similar to reiss.com (I’ve provided another image). The image is so that it is the first pictures customers will see, before they actually scroll down to the available products.

Thanks a lot!!!

[RaynardKyleGuzman]

Hi all!

One more thing, to align center the product description and the price below each product image. (image provided)

Thanks!

[Rad]

Hi there,

1. Please add this CSS as well,

.x-btn-navbar.collapsed, .x-btn-navbar {
background-color: #000;
}

2. This too,

.woocommerce div.product .images .thumbnails>a {
    width: 30.66%;
}

or this

.woocommerce div.product .images .thumbnails>a {
    width: 44%;
}

3. You mean a banner? That could be possible but should it be changing depending on page? Or is it the category page?

4. Please add this as well,

.woocommerce li.product .entry-header {
    text-align: center;
}

Thanks!

[RaynardKyleGuzman]

Thanks a lot! Everything worked out great! I need the banner to only appear on the category page or shop page (yunoclothing.com). However, is it possible to have multiple banner images. Wherein 1 image is shown at a time then the next image gradually fades in. Same with reiss.com, if you try to check it out, the first banner image is that of two women then after a couple of seconds the image of a man fades in.

Thanks!

[RaynardKyleGuzman]

Anpther thing, I want to change the font style of the product name and the price (the one that was aligned center) to helvetica. thanks!

[Author]

Posts