Return to previous page

Responsive problems - by equality - on WordPress WooCommerce support

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

equality

Participant

December 13, 2016 at 00:17

Hello,
I would like to know how to make the background image for a row to full width responsive.
The image looks great on computer, but if I view it on a mobile, I can see only the middle section. It should display my whole image but smaller.
Also the text blocks does not fit correctly to mobile.
Can you tell me the settings that i must to set for adapt them?
When i change the settings of columns for mobile they change also the order for computer so is not good.
There is a analytical video with responsive instructions?
Thank you

#148786 Copied

22 Answers

equality

Participant

December 13, 2016 at 20:32

Anything?

#148949 Copied

Eva Kemp

Support staff

December 13, 2016 at 20:46

Hello,

Please provide WP Dashboard credentials in private content.

Regards,
Eva Kemp.

#148954 Copied

equality

Participant

December 13, 2016 at 21:59

Ok,thank you

Please, contact administrator
for this information.

#148961 Copied

Eva Kemp

Support staff

December 14, 2016 at 18:35

Hello,

On the link you provided I see WordPress installation process http://storage8.static.itmages.com/i/16/1214/h_1481736963_3194880_1599eff5e8.jpeg .
Are you reinstalling the site?

Regards,
Eva Kemp.

#149084 Copied

equality

Participant

December 14, 2016 at 19:03

Yes,there is a problem with my database now,i will send you a message soon to look back.
Thank you for the patience!

#149094 Copied

Eva Kemp

Support staff

December 14, 2016 at 19:26

Hello,

Ok, looking forward to your reply.

Regards,
Eva Kemp.

#149103 Copied

equality

Participant

December 15, 2016 at 15:52

Hello,
everything it’s ok now with the site.
Can you see it?
thank you

#149196 Copied
Eva Kemp

Support staff

December 15, 2016 at 20:12
Hello,

As for image you can add this code in Theme Options > Custom CSS > Custom CSS for mobile:
```
.upb_row_bg {
    background-size: contain !important;
}
```
As for the text, it’s shown wrong on mobile because you added margins in the settings https://www.dropbox.com/s/2nfojpfoztiqz81/Selection_238.jpg?dl=0 and they are applied not only for desktop view, but for mobile too. Remove them and check the page after that.

Regards,
Eva Kemp.
#149229 Copied
equality

Participant

December 15, 2016 at 20:37

Yes,i know that i have margins because otherwise does not appears as i want.
So there is not a mode to add the margins only for desktop view and to adapt them from mobile?
Also with this css the image is too small.
thank you

#149240 Copied

equality

Participant

December 16, 2016 at 20:50

Can you please tell me,
there is a mode to keep the margins and to make it appear correctly to mobile?
And also the image is too small to mobile.Can i make it larger?
Thanks

#149351 Copied

equality

Participant

December 17, 2016 at 00:16

And also the youtube social media appears below the others
http://prntscr.com/dkdg4i

#149356 Copied

equality

Participant

December 19, 2016 at 20:28

Hello,i wait your answer!
thank you

#149569 Copied
Eva Kemp

Support staff

December 20, 2016 at 11:27
Hello,

Sorry for a delay.
Please try this code in Custom CSS for mobile section:
```
.vc_custom_1481812895309 {
   padding-left: 100px;
}
.vc_custom_1481812904624 {
  padding-left: 80px;
}
.vc_custom_1481812915053 {
   padding-left: 180px;
}
.vc_custom_1481812876819 {
    padding-left: 180px;
    padding-top: 50px;
}
```
The background image will be distorted if we stretch it vertically to fill the whole section.
As for the icons I don’t see the issue:
http://storage2.static.itmages.com/i/16/1220/h_1482229620_5309311_759de01586.jpeg

Regards,
Eva Kemp.
#149614 Copied
equality

Participant

December 20, 2016 at 17:38

Ok,with a few of changes perhpaps the texts appear correctly.
1)how can i make the fonts to these texts smaller?
2)how can i move the sidebar with social media up?
(you are right the icons appears correctly to mobile)
3)From what it depend the appearance of mobile menu?
There there are times that appears with the word “Navigation” and below the menu,and other times that appear directly the menu.Also from how can i change the font size,font family of mobile menu etc?
4)To this page http://eshoptemplate.equality.gr/foto/ does not appear to mobile the banner mask text
and
5)To this page http://eshoptemplate.equality.gr/bio/ there is a large space between photo and text.
Thank you

#149688 Copied

equality

Participant

December 21, 2016 at 16:46

Can you have a look because i must to finish the site?
thank you

#149800 Copied
Eva Kemp

Support staff

December 22, 2016 at 19:43
Hello,

Sorry for a delay.

1. Add this code in Custom CSS for mobile section:
```
.page-id-38 span {
    font-size: 20px !important;
}
```
2. Please use this code:
```
.page-id-38 .col-md-3.sidebar.sidebar-right {
    position: absolute;
    top: 0;
    margin: 10px 0;
}
```
3. To change font for mobile menu use this css code:
```
.et-mobile-menu li a {
  font-size: 15px;
  font-family: "Open Sans";
}
```
Change values to yours.

4. Add the following css code to Custom CSS for mobile:
```
.banner .banner-content p {
    display: block;
}
```
5. Use this css code:
```
.page-id-51 .vc_custom_1478790448166 {
   display: none;
}
.page-id-51 .vc_row.vc_row-o-content-middle {
   min-height: 300px !important;
}
```
Regards,
Eva Kemp.
#149946 Copied
equality

Participant

January 2, 2017 at 18:25

Thank you,
for the fifth ,the code does not work correctly,that means that the space is decreased,but it still exists.
Also does not appears the word “Bio” on the image.
Finally i removed the texts from home page for mobile.How can i decrease the white space below the photo?
Thanks

#150687 Copied
Rose Tyler

Support staff

January 3, 2017 at 09:57
Hello,

Try to add this code in Custom CSS for mobile section:
```
.page-template-default .wpb_column.vc_column_container.vc_col-sm-3 {
    display: none;
}
```
Regards,
Rose Tyler.
#150718 Copied
equality

Participant

January 3, 2017 at 11:03

Ok,this code riduces the space to this page ,but the word “Bio” still do not appear.
Also,i have a space to the home page below the image.
Is possible to increase the image and remove the space?

#150733 Copied
Rose Tyler

Support staff

January 3, 2017 at 11:31
Hello,

Try to change this code
```
.page-id-51 .vc_custom_1478790448166 {
   display: none;
}
.page-id-51 .vc_row.vc_row-o-content-middle {
   min-height: 300px !important;
}
```
to
```
.page-id-51 .vc_custom_1478790448166 {
    margin: auto !important;
}
.page-id-51 .vc_custom_1478790448166 p {
    font-size: 60px !important;
}
.page-id-51 .vc_row.vc_row-o-content-middle {
    min-height: 250px !important;
}
```
Also, add this code in Custom CSS:
```
.home .page-content {
    margin-bottom: 0;
}
```
Regards,
Rose Tyler.
#150739 Copied
equality

Participant

January 13, 2017 at 18:30

Can you please tell me how make the 2 images to appear on mobile one next to the other(and probably smaller) like on desktop and not one below the other?
Thanks

#151851 Copied

Rose Tyler

Support staff

January 16, 2017 at 08:22

Hello,

Try to change Responsive Options http://prntscr.com/dw771d

Regards,
Rose Tyler.

#151926 Copied
Viewing 23 results - 1 through 23 (of 23 total)