Docs

[venya]

Hello,
I have a couple more things I could use help with, and a general questions about cornerstone blocks…

1. Product Single page: The mobile and desktop versions of the pages are fine, but I need to adjust the tablet version. I want to center the product images and make them larger (leaving mobile and tablet the way they are).

2.On my Product single pages, I have 4 product upsells. On my desktop these 4 thumbnails are in one row across.
On smaller screens, they move into 2 rows (2×2). How can I get them to shrink and remain on 1 row?

3.A long time ago, I removed the text that comes up when a search has no results. I’d like to bring it back.

I found my code that removed the. “Below you’ll see everything we could locate for your search of “…””.
Which additional code do I need to remove in order to get the “Nothing found” message?

.p-landmark-sub{display:none;}
.search-results .p-landmark-sub {font-size: 1.5em;}

4. In cornerstone, what dimension is ideal for a background image?
For mobile and tablet, I want to focus on a section of the photo. Would this be the correct code? Or better to copy the section and use a cropped version of photo?

div#x-section-7 {
background-position: 33.5% 95px!important;
background-size: 1550px!important;
}

5. I understand the basics of importing and exporting a cornerstone section/block. I’m using the integrity stack, and like a section I found in the renew Demo 2 (the third row, with the 6 circle). I have another domain that I previously used for development… there I setup the renu demo 2 with hopes of saving the cornerstone template, but I didn’t see it actually create the homepage with the demo blocks…
Can blocks be taken and used from different stacks?

Thank you.

[venya]

This reply has been marked as private.

[Christian]

Hey there,

All your pages are password protected (see attachment). Please give us the password.

Thanks.

[venya]

This reply has been marked as private.

[Lely]

Hi There,

1. To center images on single product page of tablet view, please add the following CSS on Appearance > Customize > Custom > Edit Global CSS:

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {
    .woocommerce div.product .images {
      width: 60%;
      margin: 0 auto;
      float: none;
     }
}

2.) Add the following 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: initial;
}
.woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
    width: 22% !important;
}
}

3.) Please also remove the following custom CSS also:

.search .entry-wrap {
    display: none; 
}

4.) 1600×800 is a good banner size. It is a good choice to use a cropped version of the photo.

5.) Yes you can use block from other stacks. But this will not give you 100% same result because of different stack style.

Hope this helps.

[venya]

Hello again,
Overall that worked great.

#3. Search results mobile
Found another small issue with mobile search results: the “nothing found” text on mobile is oddly narrow and smushed into the sidebar. (see photo). How can I fix this?

#6 &#7 . Product single tablet
I would like to position the title and text on the product single pages for tablet view. (see photos). I’d like to try two different things… not sure at this point which will work better. First in #6 the text is wrapped around the image, in #7, text starts below the image. In both the title, price etc. is moved to right of image instead of below.

#8. The code below that put the product upsell images into 1 row of 4 has messed up product List images to also appear in 4 columns in tablet portrait. I would like to restore product list in tablet portrait back into 2 columns.

@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: initial;
}
.woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 22% !important;
}
}

#9. Product list – tablet
I removed the entry-wrap for the product list pages on tablet landscape with the code below, but it also made product single page disappear entirely in tablet landscape…

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {.woocommerce .entry-wrap {display:none!important;}
}

#10.
News – Tablet portrait – OK
News – Tablet Landscape: The sidebar is at the very bottom of the page (below pagination). I would like to bring the sidebar to the top of the page, to left of posts.

#11. Portfolio single on tablet. Exact same sidebar issue as in #10. Portrait is fine, landscape sidebar needs to be fixed.

As always, thank you so much for the help!
Regards,
-Ben

[venya]

This reply has been marked as private.

[Lely]

Hi Ben,

#3. Please also add this:

@media (max-width: 500px){
.search-no-results article {
    display: block !important;
    width: 100% !important;
    float: none !important;
}

} 
.search.search-no-results .entry-wrap {
    height: auto !important;
}

#6 and #7 To make the image larger and center on tablet view, please use the following CSS:

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) {

.single-product.woocommerce div.product .images {
    float: none;
    margin: 0 auto;
    width: 60%; /*Adjust to your preferred width*/
}
}

To make the text wrap around the image or to move just title and price is only possible with more in-depth customization which is outside the scope of our support. It needs a restructuring of the elements position. You may wish to consult a developer to achieve this.

#8 Please update to this:

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait){

.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: initial;
}
.woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
    width: 22% !important;
}
}
@media (max-width: 767px){

.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: initial;
}
.woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
    width: 22% !important;
}
}

#9 Please update to this:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {.archive.woocommerce .entry-wrap {display:none!important;}
}

#10 and #11 Unfortunately, moving the position of the sidebar on top would also need changes on the structure which is outside the scope of our support. Thank you for understanding.

Hope this helps.

[venya]

This reply has been marked as private.

[Lely]

Hi There,

#8 Please update to this:

@media (min-width:500px) and (max-width: 1024px){

.related .products .woocommerce .cols-3 li.product:nth-child(2n+3),
.single-product.woocommerce .cols-4 li.product:nth-child(2n+3),
.single-product.woocommerce.columns-3 li.product:nth-child(2n+3),
.single-product.woocommerce.columns-4 li.product:nth-child(2n+3) {
     clear: initial;
}

.related .products .woocommerce .cols-3 li.product,
.single-product.woocommerce .cols-4 li.product,
.single-product.woocommerce .columns-3 li.product,
.single-product.woocommerce .columns-4 li.product{
    width: 22%!important;
    margin-left:5px!important;
    margin-right:5px!important;
}
}

I’ve added the .single-product filter to stop it from affecting the product list.

We need to switch position of main content container and sidebar container. Doing that might affect the default style. See attached screenshot.

Hope this helps.

[venya]

Hello!
Making Progress!

I used the code you provided and with some additional tweaking tweaking and got it almost there. One final thing I’d like to achieve.

A. How can I make product list in mobile & tablet landscape appear 4 in a row? Currently its 2×2 and too large.

With previous code you sent (see below) it also made mobile portrait 4 in a row.. Tried adding and (orientation:landscape) but didn’t appear to work…

@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: initial;
}
.woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 22% !important;
}
}

B. I discovered that the sidebar issue on mobile tablet landscape had to do with the margin being to large.

This code formats the sidebar well in the blog desktop page. How can I remove the margin-left for tablet landscape?

@media (min-width:979px){
.blog .x-sidebar {
margin-top: 5px;
margin-left:70px!important;}
}

Tried adding @media only screen (min-width:979px) and (orientation: landscape)…didnt’ do anything.

C.I then want to use the same media query for portfolio single.

would the css be: .x-sidebar .single-x-portfolio ?

Many thanks!

[Rue Nel]

Hello There,

Please update the css codes and use this instead:

A]

 @media (max-width: 767px) {
  .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: initial;
  }

  .woocommerce .cols-3 li.product, 
  .woocommerce .cols-4 li.product, 
  .woocommerce.columns-3 li.product, 
  .woocommerce.columns-4 li.product {
    width: 22% !important;
  }
}

B]

@media (min-width:767px){
  .blog .x-sidebar {
    margin-top: 5px;
    margin-left:70px!important;
  }
}

C] And lastly, the order should be like this .single-x-portfolio .x-sidebar.

Hope this helps.

[Author]

Posts