Return to previous page

Responsive problems - by equality - on WordPress WooCommerce support

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

  • Avatar: equality
    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
    Avatar: equality
    equality
    Participant
    December 13, 2016 at 20:32

    Anything?

    #148949 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    December 13, 2016 at 20:46

    Hello,

    Please provide WP Dashboard credentials in private content.

    Regards,
    Eva Kemp.

    #148954 Copied
    Avatar: equality
    equality
    Participant
    December 13, 2016 at 21:59

    Ok,thank you

    Please, contact administrator
    for this information.
    #148961 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: equality
    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
    Avatar: Eva
    Eva Kemp
    Participant
    December 14, 2016 at 19:26

    Hello,

    Ok, looking forward to your reply.

    Regards,
    Eva Kemp.

    #149103 Copied
    Avatar: equality
    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
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: equality
    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
    Avatar: equality
    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
    Avatar: equality
    equality
    Participant
    December 17, 2016 at 00:16

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

    #149356 Copied
    Avatar: equality
    equality
    Participant
    December 19, 2016 at 20:28

    Hello,i wait your answer!
    thank you

    #149569 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: equality
    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
    Avatar: equality
    equality
    Participant
    December 21, 2016 at 16:46

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

    #149800 Copied
    Avatar: Eva
    Eva Kemp
    Participant
    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
    Avatar: equality
    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
    Avatar: Rose Tyler
    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
    Avatar: equality
    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
    Avatar: Rose Tyler
    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
    Avatar: equality
    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
    Avatar: Rose Tyler
    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)

You must be logged in to reply to this topic.Log in/Sign up

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Kids Store – WordPress WooCommerce Theme
lazy-placeholder
Organic Store – WordPress WooCommerce Theme
lazy-placeholder
Royal – WooCommerce WordPress Theme
lazy-placeholder
Poster – WooCommerce Theme
lazy-placeholder
School – WordPress Theme
lazy-placeholder
Sport Store – WordPress WooCommerce Theme
lazy-placeholder
Shoes Store – WordPress WooCommerce Theme
lazy-placeholder
X-Phone Store – WordPress WooCommerce Theme
lazy-placeholder
Spa – WooCommerce Theme
lazy-placeholder
Pub – WordPress Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.