Return to previous page

Responsive problem - by equality - on WordPress WooCommerce support

This topic has 17 replies, 2 voices, and was last updated 7 years, 10 months ago ago by Rose Tyler

equality

Participant

February 19, 2017 at 17:51

Hello,i have problem with the responsiveness of my site and to this subdomain the categories and the shop page it scrolls to the left or to the right.
Thank you

#155185 Copied

16 Answers
Rose Tyler

Support staff

February 20, 2017 at 11:49
Hello,

Try to add this code in Custom CSS for mobile:
```
.woocommerce-page .sidebar-mobile-top > .row {
    max-width: 100%;
    margin-left: 0;
}
```
Regards,
Rose Tyler.
#155220 Copied
equality

Participant

February 21, 2017 at 17:13

Hello,
this is worked only for my subdomain.For my site is not worked.
Why this is happens?

#155407 Copied
Rose Tyler

Support staff

February 22, 2017 at 14:03
Hello,

You need to change margin for some your elements in VC settings http://prntscr.com/ebzhum
Also, add this code in Custom css:
```
.main-footer #es_txt_email {
    max-width: 150px;
}
```
Regards,
Rose Tyler.
#155474 Copied
equality

Participant

February 22, 2017 at 18:39

hello,
i have removed the margin of the VC element and i added the code from above,but still scrolls to the left or to the right(less).
And i have the same problem also to the pages(does not fit the title of breadcrumbs).

#155516 Copied

equality

Participant

February 22, 2017 at 21:23

Update:I think that i have fixef it,by remove all the margins.
So when i set a margin,the site does not adapt to mobile?
Also,why this image is not adapted fine and so is blurred?
Thanks

#155529 Copied

Rose Tyler

Support staff

February 23, 2017 at 08:35

Hello,

Try to use vw or vh instead px to set margin.
Also, you need to upload the image in higher resolution.

Regards,
Rose Tyler.

#155546 Copied

equality

Participant

February 24, 2017 at 17:08

hello,
‘Try to use vw or vh instead px to set margin’ :Do you mean % ?
My image is to high resolution(1920 × 500).
The problem is that is not adapted fine(does not be shown whole).
Thank you

#155732 Copied

Rose Tyler

Support staff

February 27, 2017 at 11:13

Hello,

I mean vw (1vw = 1/100 of the current viewport width, i.e. 1% of the width) or vh (15vh = 15/100 of the viewport’s current height or 15% of the height), and also you can to use %.
On mobile this block with the image have height 772px, so you need to upload the image in higher resolution or change padding-top and padding-bottom of this block http://prntscr.com/edwn5f to 5vw.

Regards,
Rose Tyler.

#155826 Copied

equality

Participant

February 27, 2017 at 12:51

Hello,
i have changed the image(dimensions: 2907×1356)
and i have set the padding-top and padding-bottom to 5vw.
But as you can see the image does not fit well.And that was also the problem with previous image.
It displays only a part of the image to mobile.Thanks

#155850 Copied

Rose Tyler

Support staff

February 27, 2017 at 13:10

Hello,

To display full image on mobile you can add custom class for row and write code “background-size:contain;”. Is this what you want http://prntscr.com/edxxru ?

Regards,
Rose Tyler.

#155858 Copied

equality

Participant

March 7, 2017 at 11:57

Hello,
i still have the same issue.
I named the row custom class to ‘omada’ and i set this code to Custom CSS for mobile
.omada {
background-size:contain !important;
}
What i must to do to display full image on mobile?
Thank you

#156406 Copied
Rose Tyler

Support staff

March 7, 2017 at 12:21
Hello,

Change your code to:
```
.omada .upb_row_bg {
    background-size: contain !important;
}
```
Regards,
Rose Tyler.
#156410 Copied
equality

Participant

March 7, 2017 at 13:24

Now does not fit well the columns inside row(counters).

#156413 Copied

Rose Tyler

Support staff

March 7, 2017 at 14:31

Hello,

To change counters size you need to write another custom code.
Could you please clarify with more details what you want to achieve and provide wp-admin access in Private Content?

Regards,
Rose Tyler.

#156417 Copied

equality

Participant

March 7, 2017 at 20:46

I want all this that appears to the desktop to appears also to mobile but with the width of counter columns to 1/2.
I make it but the columns are out of the background.
http://prntscr.com/eh830n
There is not a mode to enlarge the picture so as to fit whell the columns?

Please, contact administrator
for this information.

#156434 Copied
Rose Tyler

Support staff

March 9, 2017 at 09:18
Hello,

You can change this your code in Custom CSS for mobile:
```
.omada .upb_row_bg {
    background-size: contain !important;
}
```
to:
```
.omada .upb-background-text-wrapper, .omada{
    height: 200px !important;
    min-height: 200px !important;
}
.omada .stats-block div {
    font-size: 1em !important;
}
.omada  .stats-block, .wpb_content_element {
    margin-bottom: 0 !important;
}
span {
    font-size: 0.5em !important;
}
.omada .upb_row_bg {
    background-size: 450px !important;
}
```
http://prntscr.com/ehr3pw

Regards,
Rose Tyler.
#156498 Copied
Viewing 17 results - 1 through 17 (of 17 total)