Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • June 19, 2017 at 3:59 pm #809843
    GuillLec

    Hello everyone, i do not find any answer.
    Why (and how can i fix) a responsive issue (size of images and consequently arrangement of columns) in mobile versus desktop ?
    Need to do it on images ? other format than png ?
    I send you the website I am working on.
    See the images (castle etc) between desktop and mobile.

    June 21, 2017 at 11:09 pm #811213
    Basilis

    Hey GuillLec,

    You can use media queries here

    @media queries Responsiveness

    which will help you out.
    Let us know if there is anything else we can do for you.

    Best regards,
    Basilis

    June 22, 2017 at 12:02 pm #811456
    GuillLec

    Well thank you for your link but it doesnt help.
    I am happy with almost everything.
    My only issue, is that on mobile (and not tablet or pc) some of my pictograms (icons) are really huge on mobile and it doesnt fit well.
    I was wondering if it was my fault (too big in size or wrong format, and i could change it.
    Otherwise its mainly due to the theme.
    And in that case how to fix it easily, with safety without installing layers plugins going too deeply in the html/css as i am not an expert …
    If too hazardous, risky or complicated, i will leave it as it is but keeping in mind that enfold responsivity is not total and that my clients on mobile can have a strange/bad experience.
    I can cope with it but wish i could avoid it.
    regards

    June 22, 2017 at 3:54 pm #811624
    Yigit

    Hi,

    Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your image elements and give them a custom CSS class (“your-custom-class” in example below) and then add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 767px) {
.your-custom-class img {
    max-width: 100px;
}}

    I hope that helps :)

    Best regards,
    Yigit

    June 23, 2017 at 2:45 pm #812126
    GuillLec

    Thank you yigit.
    I understand your method and it could work (i just need to do it on every elements but it’s fine i have may 6 or 7).
    My issue is to allow the php line > add_theme_support(‘avia_template_builder_custom_css’
    Can i do it directly in wp (like we did for the quick css) or do i need to download, modify and send a file via ftp ?
    regards
    and thank you for your reactivity and time with me

    June 23, 2017 at 4:30 pm #812156
    Yigit

    Hi,

    You are currently not using a child theme – http://kriesi.at/documentation/enfold/using-a-child-theme/. Therefore, you can simply go to Appearance > Editor and edit functions.php file and find the code at the bottom with // in the beginning of the line as following

    // add_theme_support('avia_template_builder_custom_css');

    You can simply remove // and it should be enabled.

    I also noticed that you are not using the latest version of the theme. Please consider updating Enfold to the latest version 4.0.7 – http://kriesi.at/documentation/enfold/updating-your-theme-files/ :)

    Best regards,
    Yigit

    June 30, 2017 at 12:47 am #814756
    GuillLec

    Thank you.
    I did not forgot you (just not had the time to think and act well and with cautious). You helped me a lot.
    So I edited the functions, removed the //, added some custom CSS class and it works 10x better (pictures are less big which is great, however the text relating to each picture is after in a list and do not relate to a specific picture like it is in other platforms computer and ipad).
    Will we be able to do that or is it just the way it works merely and normal ?
    I realised also that a light grey (f8f8f8f8) was my main color of body page. Was it already by default or do the changes i made (custom css) changed some things.
    Anyway its awesome and better to have little pictures on mobile.

    I also updated the theme

    July 5, 2017 at 4:27 am #816575
    Ismael

    Hi,

    however the text relating to each picture is after in a list and do not relate to a specific picture like it is in other platforms computer and ipad

    Could you please provide a screenshot of the issue?

    Best regards,
    Ismael

    October 11, 2017 at 4:54 pm #862959
    GuillLec

    I never forgot you but it seems anyway my support will / has expired.
    The issue is still there but i think it is maybe not possible the way I design it (and changing css will not help).

    I send for your records the pics via a wetransfert link.
    I try to have things well aligned with italic text refered to specific columns and one text related to 3 common columns.
    If you have some tips anyway I take.

    Thanks for your help and apologies for not having replied sooner.
    Life sometimes does not permit you to finish well things and after you struggle to find some time.
    Good job anyway for your theme and support. Keep on this way.

    October 13, 2017 at 9:21 am #863806
    Ismael

    Hi,

    Thank you for the info.

    It’s been awhile. How do you want these icons to look on mobile view? They look fine on mobile devices IMO.

    Best regards,
    Ismael

    October 13, 2017 at 11:28 am #863857
    GuillLec

    Yeah sry. I owe you now more reactivity.
    Icons are fine, just the subtitles (in italic ) are good sometimes (desktop….) but – and its normal the way I did it – not when we pass in a mode more vertical (even in a desktop mode). They are pushed away.
    I just dont know how to better do that.
    If you look at the admin mode, you will see that its a question of columns in which i do not know how to put the same text in three different columns …
    So if you see it and have tips I would be happy, otherwise no worries.

    It just made me think how people do this, shouldnot be so complicated no ?

    October 15, 2017 at 5:04 am #864396
    Ismael

    Hi,

    What if you duplicate the section or columns? The idea is to create a different layout for desktop and another for mobile view. Use the elements’ Screen Options to toggle their visibility on different screen sizes.

    Best regards,
    Ismael

    October 16, 2017 at 4:50 pm #864878
    GuillLec

    Hi Ismael,

    Thank you very much. Tks to you I discovered the hide option per display and got finally a good and sufficient final result. Awesome !!!
    So I duplicated only my text elements where i wanted on the display desired and switched them on/off according the display / right place.
    It’s not perfect in terms of alignment but almost invisible. Just don’t know if it is quick and neutral on the navigation in terms of “calculations”.
    Anyway your advice was smart.
    Sry if I do not master your great theme for the moemnt ;P
    Duplicating the section or column created issues with the anchor name of the section by the way.
    Regards
    And thank you for your time / kindness

    October 17, 2017 at 6:33 am #865151
    Ismael

    Hi,

    Glad it worked.

    Duplicating the section or column created issues with the anchor name of the section by the way.

    Is this fixed? You can also duplicate the anchor link or anchor menu item then toggle the visibility with css media queries. Just provide a different anchor name for the mobile version of the section. Example:

    // https://kriesi.at/support/topic/different-menu-on-mobile-2/#post-739900

    Best regards,
    Ismael

    October 17, 2017 at 1:16 pm #865272
    GuillLec

    The overall issue is fixed.
    Thank you for your help and support.
    I have not duplicated the section or column as mentioned but your idea (duplicating the anchor link should work I am sure, just a bit more complicated).
    Overall we are not at 100% perfection but 95% is fine for me ;)
    I keep all this as I am pretty sure I will forget but never knows, can be really helpful / save lives :D
    Regards

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Responsive images mobile vs desktop’ is closed to new replies.