Return to previous page

5 Block Container - by Andre - on WordPress WooCommerce support

This topic has 16 replies, 3 voices, and was last updated 8 years, 10 months ago ago by Eva Kemp

Andre

Participant

June 17, 2015 at 23:02

Hello i followed a tutorial on how to split my page width into 5 content blocks as this wasn’t supported in the default settings.

The problem that i have is on a mobile device the content blocks are all beside each other, would there be a custom css rule that i could apply to make them stack below each other?

Its the footer section in this page: https://www.marygrant.com/dresses/

On a desktop its fine its more the portrait phone

Please, contact administrator
for this information.

#70140 Copied Theme version: Latest WooCommerce version: Latest

15 Answers

Robert Hall

Support staff

June 18, 2015 at 07:54

Hello,

1) For clarify. Do you want 5 products in a row on desktop view?
2) As I see each products stack below each other on a mobile device.
Maybe provide screenshot for our better understanding and highlight what exactly you want.

Regards,
Robert Hall.

#70157 Copied

Andre

Participant

June 18, 2015 at 08:03

Yes on the desktop view i want the 5 beside each other & on the phone i want them to stack below each other.

How do i import snapshots?

#70159 Copied Theme version: Latest WooCommerce version: Latest
Robert Hall

Support staff

June 18, 2015 at 08:30
Hello,

I’ve added this code in custom.css file. Please check.
```
.row-count-4 .product:nth-child(4n+1){
  clear: none !important;
}
.row-count-4 .product:nth-child(5n+1){
  clear: both !important;
}
@media screen and (min-width: 1200px){
.row-count-4 .product {
  width: 175px;
}}
```
Also please see screenshot how it’s look in mobile view: http://prntscr.com/7ibkaf

Regards,
Robert Hall.
#70163 Copied
Andre

Participant

June 18, 2015 at 09:13

Thanks robert & that looks great but my issue is with the footer section, if you scroll to the bottom of that page the 5 blocks are squashed into 1 area?

#70184 Copied Theme version: Latest WooCommerce version: Latest
Robert Hall

Support staff

June 18, 2015 at 09:33
You need remove this code in custom.css file
```
.vc_responsive .home_box_wrap.wpb_row .vc_col-sm-2 {
  float: left;
  width: 18.8%;
  padding: 0;
  margin-right: 1.5%;
  min-height: 0;
}
```
Regards,
Robert Hall.
#70190 Copied
Andre

Participant

June 18, 2015 at 09:43

I cant remember why that was in there do you think if i take this out it will have any knock on effects?

Otherwise it worked taking it out.

#70196 Copied Theme version: Latest WooCommerce version: Latest

Andre

Participant

June 18, 2015 at 10:07

Robert when i take that code out the desktop version is now split into 6 blocks with the last block being empty so the footer is aligned to the left & doesnt look right?

Is there a way for both to work together?

#70201 Copied Theme version: Latest WooCommerce version: Latest
Eva Kemp

Support staff

June 18, 2015 at 10:49
Hello,

Please try to add your code:
```
.vc_responsive .home_box_wrap.wpb_row .vc_col-sm-2 {
  float: left;
  width: 18.8%;
  padding: 0;
  margin-right: 1.5%;
  min-height: 0;
}
```
to CSS block of Visual Composer editor in Static Blocks:
http://storage1.static.itmages.com/i/15/0618/h_1434620957_7945178_ef509c83d5.png

Regards,
Eva Kemp.
#70220 Copied
Andre

Participant

June 18, 2015 at 11:01

Eva i have done that & its still the same?

http://prntscr.com/7icrff

#70223 Copied Theme version: Latest WooCommerce version: Latest
Eva Kemp

Support staff

June 18, 2015 at 11:21
Hello,

I’ve readded the code to CSS block of VC editor for home page:
```
@media (min-width: 1200px) {.main-footer-2 .vc_col-sm-2 {
 float: left;
 width: 18.8%;
 padding: 0;
 margin-right: 1.5%;
 min-height: 0;
}}
```
Please check footer now.

Regards,
Eva Kemp.
#70231 Copied
Andre

Participant

June 18, 2015 at 13:49

Thats great & it looks fab, does this mean that i have to put this custom code on the pages i have created???? I have about 40?

Is there a quick way for this to be applied?

#70273 Copied Theme version: Latest WooCommerce version: Latest

Andre

Participant

June 18, 2015 at 14:37

Also when i click on a product the footer in here is incorrect & that would also mean that i have to apply this css into every product!!!!!!!!!

#70282 Copied Theme version: Latest WooCommerce version: Latest

Eva Kemp

Support staff

June 18, 2015 at 14:56

Hello,

I’ve added the same code into custom.css file.
Please check your pages now.

Regards,
Eva Kemp.

#70290 Copied

Andre

Participant

June 18, 2015 at 14:59

Thats brilliant seemed to work perfectly now.

Will this be overwritten if i upgrade the theme?

#70291 Copied Theme version: Latest WooCommerce version: Latest

Eva Kemp

Support staff

June 18, 2015 at 15:09

Hello,

You’re welcome.
Changes in custom.css file won’t be overwritten.
Anyway we recommend always to create back up of your files before each update.

Regards,
Eva Kemp.

#70294 Copied
Viewing 16 results - 1 through 16 (of 16 total)