-
AuthorPosts
-
January 13, 2017 at 12:16 am #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
January 17, 2017 at 12:50 am #734411Hey 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,
NikkoJanuary 17, 2017 at 7:24 pm #734933Hi 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
January 18, 2017 at 9:16 am #735198Hi 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,
NikkoJanuary 18, 2017 at 3:07 pm #735343Hi Nikko,
I had already provided you the access to admin.
Kind Regards
Elsa Soares
January 19, 2017 at 6:47 am #735692Hi 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,
NikkoJanuary 19, 2017 at 2:21 pm #735857Hi 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
January 23, 2017 at 8:23 am #737147Hi,
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,
IsmaelJanuary 23, 2017 at 7:36 pm #737396Hi 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 SoaresJanuary 27, 2017 at 9:04 pm #739575Hi,
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,
AndyJanuary 30, 2017 at 1:33 am #740053Hi 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 SoaresJanuary 30, 2017 at 2:35 pm #740190Hi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.