Website isn't responsive - by Kris - on WordPress WooCommerce support

Kris · 2015-06-29T19:11:10+00:00

When I switch the theme to "responsive" and I view it on my phone or minimize the screen, It doesn't look good and the images don't load. The site isn't showing up properly when in responsive mode. Please help, Kris

Solved19 replies5 participantsUpdated 11 years ago by Stan Russell

Kris

Participant

June 29, 2015 at 20:11

When I switch the theme to “responsive” and I view it on my phone or minimize the screen, It doesn’t look good and the images don’t load. The site isn’t showing up properly when in responsive mode.

Please help,

Kris

Please, contact administrator
for this information.

#72254 Copied Theme version: 2.7.1 WooCommerce version: 4.2.2

19 Answers

Robert Hall

Participant

June 29, 2015 at 20:53

Hello,

You’re using old theme version. Please update.
Also you have a lot of legenda themes installed. Please remove the oldest.
Don’t forget to make backup site before update.
Here is video tutorial how to update theme:
https://www.youtube.com/watch?v=KdWESIIPU1k

Regards,
Robert Hall.

#72260 Copied

Kris

Participant

June 30, 2015 at 18:47

Robert,

I updated the theme and now I have more issues that I previously had before. On the products page no green notification shows up and the site still is not responsive. It is running a lot slower as well. This is also after I cleared my cache.

Help

Kris

Please, contact administrator
for this information.

#72437 Copied Theme version: 2.8 WooCommerce version: 2.3.11

Eva Kemp

Participant

June 30, 2015 at 21:29

Hello,

I’ve added this code in style.css of your child theme:
.product-loop.product-count-5 .product .product-image-wrapper .product-mask, .product-loop.product-count-5 .product .added-text{display:block;}
Now green message is shown. Please clear browser cache and check.

You disabled Responsive Design in Theme Options > Responsive. I’ve enabled it. Please check your site on mobile devices now.

Regards,
Eva Kemp.

#72456 Copied

Kris

Participant

June 30, 2015 at 21:56

Thank you Eva. I thought the green notification issue was going to be fixed in the update? I understand that the responsive setting was shut off but when it’s on, the website does not load properly and nothing seems to fit and the rest of the page does not load. White screen.

Please help and thank you so much for your quick reply and patience

Kris

#72466 Copied

Jack Richardson

Support staff

July 1, 2015 at 08:26

Hello,

As I see your site is loading fine on mobile:
http://storage3.static.itmages.com/i/15/0701/h_1435735448_5596574_458d7a15c6.png
Did you check it on different mobile devices?

Best regards,
Jack Richardson.

#72520 Copied

Kris

Participant

July 1, 2015 at 18:09

Jack,

The site isn’t showing up fine. The banners and featured products do not fit the way they’re supposed to.

Banners don’t fit like demo version
http://s21.postimg.org/bnanag4kn/IMG_6704.png

Featured products don’t fit
http://s24.postimg.org/i4vw0g2ed/IMG_6706.png

Featured products sitting properly on demo site
http://s1.postimg.org/dl002t3pr/IMG_6707.png

If you scroll down the whole page the entire middle section is black and the banners at bottom do not fit either….

Kris

#72664 Copied

Eva Kemp

Participant

July 3, 2015 at 11:38

Hello,

The problem is caused by the code you added in custom.css:
http://storage2.static.itmages.com/i/15/0703/h_1435919811_9353213_6517b2f7f6.png
Remove it and check the site after that.

Regards,
Eva Kemp.

#73003 Copied

Kris

Participant

July 13, 2015 at 18:44

Thank you Eva,

I just removed the css and nothing changed. The entire site is not showing up properly, home banners, featured products etc. That css was just for the drop down sub menu. If i don’t add the css the I can’t access all the sub menu tabs.

Kris

#74945 Copied
Eva Kemp

Participant

July 14, 2015 at 11:35
Hello,

I’ve enabled responsive design in Theme Options and commented the code in your custom.css:

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 978px; }

And I’ve added this code:

@media (max-width: 979px) { .page-content > .row-fluid { display: block !important; }}

Please check your site on mobile devices now and clear cache of your browser before.

Regards,
Eva Kemp.
#75076 Copied
Kris

Participant

July 15, 2015 at 22:58

Thank you Eva!

That fixed all issues but one. The featured products on the home page show up convoluted small and crunched…how can this be fixed?

Kris

#75461 Copied

Jack Richardson

Support staff

July 16, 2015 at 11:37

Hello,

I don’t see any issues with featured products:
http://storage4.static.itmages.com/i/15/0716/h_1437042940_3360272_b91c7d61d6.png

Please show us a screenshot.

Thank you.

Best regards,
Jack Richardson.

#75536 Copied

Kris

Participant

July 16, 2015 at 19:33

Hello,

Here are the screenshots:

How mine shows up on phone and minimized window
http://s22.postimg.org/6ive5ubo1/responsive_products.png

How demo site shows up on phone and minimized window
http://s8.postimg.org/3wwsgkgyt/legenda_demo_products.png

Regards,

Kris

#75617 Copied
Eva Kemp

Participant

July 17, 2015 at 10:11
Hello,

Please add this code in custom.css file:

@media (max-width: 480px) {.items-slider .owl-carousel .owl-item { width: 100% !important; }}

Regards,
Eva Kemp.
#75692 Copied
Kris

Participant

July 18, 2015 at 01:48

Eva,

The products still are not showing up properly. It’s supposed to be one item visible with the ability to swipe right or left to view other products. The way it’s showing up now is vertically one by one and larger than the screen size. It does not fit and it’s making the website load very slowly.

I am going to disable responsive design so that customers don’t see the webpage like this. Please feel free to access the site so that you may adjust it.

http://s17.postimg.org/8u0aurt33/product_responsive.png

Kris

#75803 Copied

Eva Kemp

Participant

July 20, 2015 at 16:49

Hello,

I’ve enabled responsive design again and fixed the issue with featured image. The problem was you selected to show 4 products in a slider on mobile device in Products element settings on your home page. I’ve changed it to 1 product. Please check your site now.

Regards,
Eva Kemp.

#76015 Copied

Kris

Participant

July 20, 2015 at 17:59

Eva,

Oh okay. It looks great on mobile but now on desktop it looks spread out and wide and the logo is not centered. the entire site looks strange now on the desktop. I hate to be such a pain about this but I am starting to wonder if you (the staff) check the site through and through before replying that the issue is fixed. I am going to need to restore the website to get rid of whatever happened on your end and just change the product view on mobile devices. I can’t accept the website to look like this. I am sorry if I am sounding rude.

When I remove this css the webpage looks normal on desktop but bad on mobile.

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: auto !important;
}

I don’t know where to go from here

Kris

#76044 Copied

Eva Kemp

Participant

July 20, 2015 at 18:32

Hello,

I’ve checked your site in desktop and mobile variants and it’s shown fine:
http://storage3.static.itmages.com/i/15/0720/h_1437413524_9106226_aa53d52459.png
http://storage4.static.itmages.com/i/15/0720/h_1437413565_2534683_6c9bbafb38.png
Please clear your browser cache and check the site again. Also try to check with different Internet provider.

Thank you.
Regards,
Eva Kemp.

#76051 Copied

Kris

Participant

July 23, 2015 at 00:36

Eva,

It is all working properly. Thank you so much

Kris

#76596 Copied

Stan Russell

Participant

July 23, 2015 at 09:03

Hello,

we are happy that your problem is solved! Have a nice day!

Regards,
Stan Russell.

#76642 Copied

The issue related to '‘Website isn't responsive’' has been successfully resolved, and the topic is now closed for further responses

Website isn't responsive - by Kris - on WordPress WooCommerce support

19 Answers

Is your store missing upsells?

How fast is your website?

Explore our WordPress WooCommerce themes