Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 17, 2015 at 3:44 pm #504908
    AWZ

    Hi,

    so the website looks nice and almost everything is fine. Some things doesn´t work in smaller resolutions (responsiveness).

    Please look under the links.
    1) The pictures incl. the captions doesn´t work well on mobile devices. Do you have a solution?
    2) The video doesn´t play on mobile devices.

    And
    3) I can´t find the possibility to change the correct size here for the Linked Image Overlay
    4) Where can I manipulate the colors of the links

    Thanks!

    September 18, 2015 at 4:11 pm #505630
    Andy

    Hi AWZ!

    1.) It works well for me on mobile. Can you show us which changes you want to achieve? use imgur.com or dropbox to provide us screenshots.

    2.) Do you mean autoplay for the video? it does not work on mobile devices in general, because most mobile devices don’t allow it by default.

    3.) Try this code in Quick CSS field:

    span.image-overlay.overlay-type-extern {
width: 262px !important;
height: 400px !important;
}

    4.) Go to Enfold->General Styling and look for the parts which control link color.

    Regards,
    Andy

    September 21, 2015 at 10:20 am #506315
    AWZ

    Hi Andy,

    1) It looks not nice and responsive at this point. Please look the screenshots of my smartphone in the dropbox.
    2) It isn´t possible to start the video. You don´t see a button or can start with a touch. Dropbox
    3) = solved for me. The selector works, but there is a problem with the dimension. In normal resolution it is to small, in smaller (mobile) to big. With this code it works fine.
    span.image-overlay.overlay-type-extern {
    width: 100% !important;
    height: 100% !important;
    }
    4) There´s no option for the social links. The colors are defined there. But I can´t see this social link colors there.

    Thanks

    September 22, 2015 at 11:36 am #506918
    Andy

    Hey!

    1.) I checked your homepage again which looks totally fine to me, but it is not the same page shown in your screenshot. Please always include a precise link where we can see the issue, because we need to inspect the elements.
    However, try this code:

    ul.avia-slideshow-inner {
height: 350px !important;
}

    and adjust as needed.

    2.) Video on mobile can be very expensive for the enduser (especially in countries like Germany for example) and background videos don’t work well on mobile devices. That is why you have the option to go for a fallback image on mobile.

    4.) Can you provide us a precise link showing your social links? then we can inspect the element and provide you some precise CSS code for color changes.

    Regards,
    Andy

    September 23, 2015 at 9:42 am #507556
    AWZ

    1) Oh no it´s the same version and website as you have. Please look at the links. I´ve tried it in the quick css. Result:
    a) Desktop Resolution: Image is cropped
    b) mobile: now the Text is visible but bigger than the background image

    2) Ok. Is there a possibility to give the user a choice (without using youtube) and give them not only the fallback? Today it´s normal (even in germany and maybe in austria :) to look videos with mobile data network. And it doesn´t work in WLAN too.

    4) Link included

    September 23, 2015 at 1:14 pm #507706
    Andy

    Hey!

    1.)
    a) Use this to control image height on desktop: 

    ul.avia-slideshow-inner {
height: 560px !important;
}

    and adjust as needed.
    b) You need to use media queries for a different behavior on mobile devices.

    2.) Refer to this thread and follow it: https://kriesi.at/support/topic/home-page-video-on-mobile-phone

    4.) Use this to change background-color social buttons:

    li.av-share-link.av-social-link-facebook {
background-color: red;
}
li.av-share-link.av-social-link-mail {
background-color: green;
}

    Regards,
    Andy

    November 4, 2015 at 3:12 pm #530055
    AWZ

    Hi & thanks.

    I’d made it like your suggestion. The text is now visible on mobile. But the background images doesn`t fit to the content. The images (landscape and portrait) are much smaller than the content and they end before the text ends. Do you have a solution finally for that? I tried this code in your custom.css. (by the way: In case of the themeupdate: does the custom.css will be ovewritten?)

    This code works with the content.

    @media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
ul.avia-slideshow-inner {
    height: 560px !important;
}

    But I can´t find a proper selector for the slider-images. I think it has to be like this:
    `{
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    }
    `

    PS to responsiveness: the logo and the navigation collide before the breakpoint at 767px. Do have a hint for that?

    • This reply was modified 9 years, 1 month ago by AWZ.
    November 5, 2015 at 7:47 pm #531152
    Andy

    Hi!

    custom.css and Quick CSS field are update safe.

    Use this code to control it on mobile devices:

    @media only screen and (max-width: 767px) {
.avia-slideshow li img {
height: 500px;
width: 630px !important;
max-width: 630px;
}}

    Cheers!
    Andy

    November 6, 2015 at 10:41 am #531387
    AWZ

    Thanks Andy,

    the right way to include this two selectors and slyles is to use only one time the “@media only screen and (max-width: 767px) {……..}” in one big bracket – correct?

    FEEDBACK
    The selector is now correct (how do you find it – do you have better developer tools? ;)
    The image is currently unproportional increased.

    The problem is: when I use other ratios in px and percents – smaller or bigger – the result of the bg-img is either
    unproportional increased or smaller than the content. Both not optimum. ?

    Regards Sven

    November 6, 2015 at 2:25 pm #531447
    Andy

    Hey!

    not sure what you mean with your first question, but your code here:

    @media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
ul.avia-slideshow-inner {
    height: 560px !important;
}

    is missing a bracket at the end, because you have two opening brackets, but only one closing one.

    I just use Google Chrome and choose to inspect the elements (right click in browser).

    If you want something more proportional, then you should use %, but height value does not allow %, so you can use width value only:

    @media only screen and (max-width: 767px) {
.avia-slideshow li img {
width: 90% !important;
max-width: 90px;
}}

    It will be difficult though, because it will probably look good in landscape mode but not in portrait mode. You need to try different values until it fits for you.

    Best regards,
    Andy

    January 19, 2016 at 6:34 pm #568031
    AWZ

    The solution looks a bit weird but it works.
    /***** MEDIA QUERIES bis 667px *****/
    @media only screen and (max-width : 667px) {
    .avia-slideshow li img {
    width: 150% !important;
    min-width: 150% !important;
    }}

    /***** MEDIA QUERIES bis 375px *****/
    @media only screen and (max-width : 375px) {
    .avia-slideshow li img {
    width: 200% !important;
    min-width: 200% !important;
    }}

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Responsiveness & rest’ is closed to new replies.