Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #732889

    Hi,

    I’m using wcvendors plugin with Enfold.

    My request has to do with the fact the vendors’ banner is not displaying correctly in responsive mode on pages:
    http://www.bemvestir.moda/vendedores/ (vendors’ general page) and
    http://www.bemvestir.moda/vendedores/fatos-e-calcas/ (an individual vendor page).
    To be more precise, either the background image and the text over the image are not being displayed correctly in the responsive mode.

    I asked for help to wcvendors plugin support and they answered me the following:

    ”Adjustments can be made in the css by using multiple media queries, and you can add styles for the banner and icon using similar settings to these following media queries, by changing these styles to meet the needs of your theme:

    /* Smartphones (portrait and landscape) ———– */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    /* Styles */
    }

    /* Smartphones (landscape) ———– */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    }

    /* Smartphones (portrait) ———– */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    }

    I appreciate your help in order to get the desired result.

    Kind Regards

    Elsa Soares

    #734411

    Hey Elsa,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
      .wcv-pro-vendorlist .wcv-banner-wrapper > img {
        max-width: none;
        min-height: 280px;
        max-height: 280px;
        width: auto;
      }
    }

    I’m not sure what it should look like but I hope this is a good start. Let us know if it’s good :)

    Best regards,
    Nikko

    #734933

    Hi Nikko,

    Thank you for you support.
    I placed in Quick CSS the code you gave me and apparently nothing has changed, as you can check on pages:
    http://www.bemvestir.moda/vendedores/ (vendors’ general page) and
    http://www.bemvestir.moda/vendedores/fatos-e-calcas/ (an individual vendor page).

    I still need your precious help :)

    Kind Regards

    Elsa Soares

    #735198

    Hi Elsa,

    It should work since it was working on a web inspector but since it doesn’t work, can we request for temporary admin access? so we can inspect it further.

    Best regards,
    Nikko

    #735343

    Hi Nikko,

    I had already provided you the access to admin.

    Kind Regards

    Elsa Soares

    #735692

    Hi Elsa,

    Thanks. I tried the login I used before but didn’t work when I trying to login. The code wasnt working because > is being replaced with > also I placed the code near the bottom of Quick CSS. Let us know if this is good :)

    Best regards,
    Nikko

    #735857

    Hi Nikko,

    Thanks for your reply :)

    Do you know why http://bemvestir.moda/wp-admin/ is redirecting to http://www.bemvestir.moda/wp-login.php?redirect_to=http%3A%2F%2Fwww.bemvestir.moda%2Fwp-admin%2F&reauth=1 ?
    However, using http://www.bemvestir.moda/wp-login.php and the credentials access I gave you, everythink is ok.

    The code seems to work great on http://www.bemvestir.moda/vendedores/ (vendors’ general page).
    But also there’s another page – http://www.bemvestir.moda/vendedores/fatos-e-calcas/ (an individual vendor page), and in this one the code is not working.
    For this reason I still need your precious help.

    Kind Regards

    Elsa Soares

    #737147

    Hi,

    Please replace the code with the following.

    @media only screen and (max-width:767px) {
      .wcv-pro-vendorlist .wcv-banner-wrapper > img, .wcv-store-grid #banner-wrap > img {
        max-width: none;
        min-height: 280px;
        max-height: 280px;
        width: auto;
      }
    }
    

    Best regards,
    Ismael

    #737396

    Hi Ismael,

    Thanks for the code.
    We are almost there, however for resolutions (768×1024; 800×600; 800×1280; 960×600; 1024×600: 1024×768; 1024×1366; 1152×864) this is not displaying as it should be.

    I replaced the last code and at this time my css is like this:

    @media only screen and (max-width:767px) {
    .wcv-pro-vendorlist .wcv-banner-wrapper > img, .wcv-store-grid #banner-wrap > img {
    max-width: none;
    min-height: 280px;
    max-height: 280px;
    width: auto;
    }
    }

    /* Smartphones (portrait and landscape) ———– */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    /* Styles */
    }

    /* Smartphones (landscape) ———– */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    }

    /* Smartphones (portrait) ———– */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    }

    I appreciate your help.

    Kind Regards
    Elsa Soares

    #739575

    Hi,

    you need to adjust the media queries for different screen sizes. Refer to: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Best regards,
    Andy

    #740053

    Hi Andy,

    Thanks for the reply.
    Since it is not my area of expertise, I will have to consult carefully the information following the link you provided me, in an attempt to achieve the result I want.

    Best Regards
    Elsa Soares

    #740190

    Hi,

    alright! Let us know if you have any more questions related to the theme and have in mind if you need help with any customization you can always rely on an expert from here: http://kriesi.at/contact/customization

    Best regards,
    Andy

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.