Docs

[peglegsqueeks]

URL: http://navelgazersdance.com/shop/
Wordpress:4.7
X-theme:4.6.4
Cornerstone:1.3.3

Hi Guys,

I’m having trouble trying to get the shop, product categories and products to display in the correct number of columns for mobile devices. At the moment devices smaller than aprox 680px display correctly. Between aprox 680px and 1430px it leaves HUGE black space on right side of the screen ( refer to screen shots ). Bigger than a 1430px screen size and it displays correctly again.

I would like it to resize correctly across all screen sizes without leaving big blank areas. My column setting is set to display 4 columns.

Any help would be greatly appreciated.

Kind Regards
Chris G

here is my Customisng->custom-> global css:-

.x-post-carousel.unstyled{
height: 170px;
}
.x-post-carousel.unstyled .entry-cover{
padding-bottom: 195px;
}
.h-entry-cover {
padding: 10px;
}
.blog .x-main .hentry,
.x-sidebar {
background: #fff;
padding: 25px 25px;
}
.x-container.main:before {
background-color: #ddc2b8;
}
.entry-wrap { background-color: white; padding: 15px 15px;
}
.x-container.main:before {
background-color: transparent;
}
.x-page-title-disabled .entry-content {
margin-top: 0px;
position: relative;
background-image:url(http://navelgazersdance.com/wp-content/uploads/2015/07/BackgroundflowerDIFINITIVE.jpg);
background-repeat: repeat;
}
.x-pricing-column h2 {
font-size: 25px;
}
.x-pricing-column h2 span {
font-size: 11px;
}
.x-navbar .x-nav > li > a:hover, .x-navbar .x-nav > .current-menu-item > a {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.x-navbar .x-nav > li > a:hover:after, .x-navbar .x-nav > .current-menu-item > a:after {
content:\”\”;
display:block;
border-bottom: 3px solid Orange;
position:relative;
top: 9px;
left: 1px;
}
.woocommerce li.product .entry-header .price > .amount, .woocommerce li.product .entry-header .price > ins > .amount {
font-size: 16px;
color: #fff;
}
.woocommerce li.product .entry-header h3 {
margin: 0;
padding: 1.0em;
font-size: 12px;
line-height: 0.8;
text-transform: capitalize;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.woocommerce-account form select, .woocommerce-account form textarea, .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\”] {
width: 100%;
border-color: black;
}
/* Change the topbar height */
.x-topbar{
height: 20px;
max-height: 20px;
min-height: 16px;
color: White;
font-size:small;
text-align: left;
/* Adjust to fit your needs */
}
/* Change the topbar font size */
.x-topbar .p-info, .x-topbar .p-info a{
font-size:small;
}

h3, .h3 {
margin: 0.25em 0 0.2em;
text-rendering: optimizelegibility;
}
.woocommerce li.product .entry-wrap {
position: absolute;
top: calc(100% – 2.4em);
left: 0;
right: 0;
bottom: auto;
padding: 0;
font-size: 14px;
-webkit-transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
}
.woocommerce li.product {
float: left;
overflow: hidden;
position: relative;
margin: 0 4% 4.5% 0;
padding: 17px;
background-color: white;
Border: 1px solid black;
border-radius: 6px;
}
.woocommerce li.product-category:nth-child(4) {
border: 1px solid black;
}

.woocommerce .cols-4 li.product, .woocommerce.columns-4 li.product, .woocommerce li.product.first {
font-size: x-small;
}
.woocommerce .cols-4 li.product h3, .woocommerce.columns-4 li.product h3, .woocommerce li.product.first h3 {
font-size: small;
}
.woocommerce li.product:hover .entry-wrap {
top: calc(100% – 6.385em);
}
.single-product a.x-img > img {
display: block;
margin-left: auto;
margin-right: auto;
border: 1px solid #000;
box-shadow: inset 0 -2px 3px rgba(0,0,0,0.45);
padding: 8px;
}
.woocommerce div.product .summary .single_variation {
text-align: left;
}
.x-btn, .button, [type=\”submit\”] {
display: inline-block;
position: relative;
border: 1px solid black;
padding: 0.563em 0.6em 0.813em;
cursor: pointer;
font-size: 12px;
font-weight: inherit;
line-height: 1.2;
text-align: center;
vertical-align: bottom;
color: Black;
background-color: white;
-webkit-transition: all 0.10s linear;
transition: all 0.15s linear;
transition-property: all;
transition-duration: 0.10s;
transition-timing-function: linear;
transition-delay: 0s;
}
.entry-thumb {
display: block;
position: relative;
overflow: hidden;
text-align: center;
}
.h-landmark entry-title {
display: none;
}
.h-landmark {
display: none;
}
@media (max-width:480px){
.woocommerce div.product .woocommerce-tabs h2, .woocommerce-page div.product .woocommerce-tabs h2 {
font-size: x-small;
}
div#tab-description {
font-size: 10px;
}
}
@media (max-width:450px){
table thead th {
vertical-align: bottom;
font-size: 12px;
}
table th, table td {
padding: .5em .325em;

}
table td {
font-size: 12px;
}
}
@media (max-width: 1430px) {
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 20%;
}
}
@media (max-width: 480px) {
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 48%;
}
}

[peglegsqueeks]

Sorry guys here are the 2 screen shots

[Lely]

Hello There,

Thank you for the complete information above. The issue is because of the following custom CSS:

@media (max-width: 1430px) {
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 20%;
}
}

If overrides other columns size declaration. Since after that CSS you have declared columns to be 48% in width for 480px screen and below it doesn’t affect correctly. Try to remove that code or update to this:

@media (min-width: 980px) {
.woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 20%;
}
}

Hope this helps.

[peglegsqueeks]

Thank you Lely,

For your quick solution. It works!

However what I really would like is to see 1 or 2 columns for the small resolutions screens. 3 columns for medium resolution screens, and 4 columns for the large resolution screens.

small <=480px
medium 480px – 1280px
large 1280px – plus

Is this possible with custom css this is what I was really aiming for.

Kind Regards
Chris Gomersall

[Rue Nel]

Hello Chris,

Thanks for updating in! If you want to display a couple of columns in different screen size, please have the code updated and may use this code instead:

@media (min-width: 980px) {
  .woocommerce .cols-2 li.product, 
  .woocommerce .cols-3 li.product, 
  .woocommerce .cols-4 li.product, 
  .woocommerce.columns-2   li.product, 
  .woocommerce.columns-3 li.product, 
  .woocommerce.columns-4 li.product {
    width: 24%;
  }
}

@media (min-width: 480px) and (max-width: 980px) {
  .woocommerce .cols-2 li.product, 
  .woocommerce .cols-3 li.product, 
  .woocommerce .cols-4 li.product, 
  .woocommerce.columns-2   li.product, 
  .woocommerce.columns-3 li.product, 
  .woocommerce.columns-4 li.product {
    width: 33%;
  }
}

@media (max-width: 479px) {
  .woocommerce .cols-2 li.product, 
  .woocommerce .cols-3 li.product, 
  .woocommerce .cols-4 li.product, 
  .woocommerce.columns-2   li.product, 
  .woocommerce.columns-3 li.product, 
  .woocommerce.columns-4 li.product {
    width: 48.5%;
  }
}

We would loved to know if this has work for you. Thank you.

[peglegsqueeks]

Wow you guys are fast!
Your support is better than so many other IT companies and services.

You should hire yourselves out to teach them good customer service.

please let me know of a review URL where I can leave you guys some positive feedback!

Kind Regards
Chris G

[Rue Nel]

Hello Chris,

Thank you for the very kinds words. We really appreciate it!
How about giving us some feedback or a five star ratings in ThemeForest?

Cheers,
Theme.co

[peglegsqueeks]

Ok I will post a positive review at ThemeForest.

I added your css code and the resizing is working better after I modified the sizes a little to account for my margins.

However I still get 2 colums with Blank space on the right at medium resolutions.

Is there a way to fix this so it doesn’t leave so much blank space on the right at medium resolutions. Can it display 3 columns.

The problem might be in my existing custom CSS.

Please refer screen shot.

Kind Regards
Chris G

[Rue Nel]

Hello Again,

To resolve the spacing issue, please also add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 979px){
  .woocommerce .cols-3 li.product:nth-child(2n+3), 
  .woocommerce .cols-4 li.product:nth-child(2n+3), 
  .woocommerce.columns-3 li.product:nth-child(2n+3), 
  .woocommerce.columns-4 li.product:nth-child(2n+3) {
    clear: none;
    margin-right: 2%;
  }

  .woocommerce .cols-3 li.product:nth-child(2n+2), 
  .woocommerce .cols-4 li.product:nth-child(2n+2), 
  .woocommerce.columns-3 li.product:nth-child(2n+2), 
  .woocommerce.columns-4 li.product:nth-child(2n+2) {
    margin-right: 2%;
  }

  .woocommerce li.product {
    margin-right: 2%;
  }
}

Please let us know if this works out for you.

[peglegsqueeks]

OMG it totally works super smooth!

Now it gradualy resizes to fit the screen res. Thank you so much it was bugging me that I couldn’t get it right.

FYI I just left a 5 star review at https://themeforest.net/item/x-the-theme/5871901/comments

You guys Rock!

Kind Regards
Chris G

[Rue Nel]

Hello Chris,

Super Thanks for the rating! We’re happy to help you out. That what we are here for.
If you need anything else we can help you with, don’t hesitate to open another thread.

Cheers.

[Author]

Posts