Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • #749261

    Hi.
    I want some images to be changed when viewed on mobile. Some pics have to be the same but resized, then others changed.
    In wp-content/themes/enfold/css/custom.css.
    For exs. I want

    • 22-1030×686.jpg -> catamarano_mobile.png
    • 15370113_10208028177243763_5409972880590867541_o.jpg -> yacht_mobile.png

      I wrote this:
      (am I doing some mistakes?)

      }
      @media (max-width 350px){div.flex_cell.no_margin.av_one_half.avia-builder-el-13.el_before_av_cell_one_half.avia-builder-el-first {
      background-image:url(http://**********/wp-content/uploads/2016/05/22-1030×686.jpg);
      background-position:top left;
      background-repeat:no-repeat;
      background-attachment:scroll;
      vertical-align:top;
      padding:100px;
      display:none;
      }

      div.flex_cell.no_margin.av_one_half.avia-builder-el-13.el_before_av_cell_one_half.avia-builder-el-first {
      background-image:url(http://*******/wp-content/uploads/2017/02/catamarano_mobile.png);
      background-position:top left;
      background-repeat:no-repeat;
      background-attachment:scroll;
      vertical-align:top;
      padding:100px;
      }

      flex_cell.no_margin.av_one_half.avia-builder-el-20.el_after_av_cell_one_half.avia-builder-el-last.avia-full-stretch {
      background-image:url(http:/***********/wp-content/uploads/2016/05/15370113_10208028177243763_5409972880590867541_o.jpg);
      background-position:center right;
      background-repeat:no-repeat;
      background-attachment:scroll;
      vertical-align:top;
      padding:100px;
      background-color:#719430;
      display: none!important;
      }

      flex_cell.no_margin.av_one_half.avia-builder-el-20.el_after_av_cell_one_half.avia-builder-el-last.avia-full-stretch {
      background-image:url(http://***********/wp-content/uploads/2017/02/yacht_mobile.png);
      background-position:center right;
      background-repeat:no-repeat;
      background-attachment:scroll;
      vertical-align:top;
      padding:100px;
      background-color:#719430;
      }
      }

      Thank you!

    • This topic was modified 7 years, 8 months ago by kharsoul.
    #749659

    Hey kharsoul,

    Can you give a link to the page where this custom code should work? so we can inspect further. Also you might want to change this:

    @media (max-width 350px){

    to

    @media only screen and (max-width:479px) {

    so it can cater more mobile devices :)

    Best regards,
    Nikko

    #750532

    Hi, I gave to you the link.
    In the middle of the page there are 2 fullwidth block content (one with a Catamaran’s photo another with Yacht’s foto). I ispected and used that classes. Not sure if are right.
    With my code nothing changes, I’ll change media query to 479 when it will works. Thank you!

    #752211

    UP.

    Sorry to bother you guys! But I need a solution ASAP.
    Same code tried with instantWP(offline) worked. Online dosen’t :)

    #752486

    Hi,

    Can you please create a temporary admin login and post it here privately so we can look into it?

    Best regards,
    Yigit

    #754226

    The credentials are the same of the other topic. :)
    I posted in “private content”.
    Thank you!

    #754647

    Hi!

    There was an error in your custom CSS in Quick CSS field. I fixed it. Please add your media queries once again to Quick CSS field and then flush cache in Total Cache settings and check your website once again. If that still does not help, please keep the code in place so we can see the issue :)

    Best regards,
    Yigit

    #755035

    I’ve copied the same CSS code from custom.css in “Quick CSS”. Doesn’t work. Take a look pls.
    Thank you!

    #755041

    Hi,

    You had errors in your custom CSS code. I fixed them and flushed cache. Please review your website now

    Best regards,
    Yigit

    #756547

    what errors did contain?

    Anyway dosent’ work.

    Using “MobileTest.me” with iPhone 5 and Galaxy Y the first image of the catamar remained the same, but all the second content-box disappeared completelty (both image and text!).

    #760004

    Hi,

    Do you still need any help with the issue?

    Best regards,
    Victoria

    #760542

    Yes, the problem persists.

    #762108

    Hi kharsoul,

    The second box is there now as well. I did not change the images. They are heavy for mobile, but the look better than the other ones. So it’s your call, if you change the images, the upper button will need different color.

    Let me know if this was helpful.

    Best regards,
    Victoria

    #762508

    Yes the second box appeared again BUT maybe I haven’t been clear.
    the first box with the catamarn photo +360px width t’s ok then <360px becomes this 1 -> http://www.*****.com/wp-content/uploads/2017/02/catamarano_mobile.png
    the secondo box with the yacht photo +360px width its ok then <360px becomes this 1 -> http://www.***.com/wp-content/uploads/2017/02/yacht_mobile.png

    With those media queries the image ain’t changing.

    (I’ve put the images in the private content box)
    Thank you,
    Elia

    • This reply was modified 7 years, 8 months ago by kharsoul.
    #764106

    Hi kharsoul,

    You can give these divs ids, and using these ids and media queries change the images for smaller screens.
    You will also have to change the button colors, since the white ones will not be seen over white background.

    Let us know if you have any more questions.

    Best regards,
    Victoria

    #768676

    Sorry Victoria, not to bother you or other mods anymore, but the code I past in the first post is not correct? I asked another developer friend of mine and said it should work.
    Maybe I’m OT but another issue: the site is very slow even it’s optimized following the speedsite insights. I shuld decrease the quality of the slides’ images?
    Thank you,
    have a nice day
    Elia

    #769936

    Hi kharsoul,

    Well, maybe not the top images (even though they are the heaviest), but the two with buttons on them, make them smaller, crop, and the image with two photos on transparent background, you can make two small images with the faces, instead of one big, invisible.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #777872

    I thought I had written a reply…anyway the problem persists.
    I just want to know what part of my code is incorrect for these media queries
    image1a normal monitor -> image1b (smaller) for mobile
    image2a normal monitor -> image2b (smaller) for mobile

    Thank you

    #778857

    Hi kharsoul,

    Show me the code and where did you put it?

    Best regards,
    Victoria

    #779221

    In:

    • wp-content/themes/enfold/css/custom.css
    • in the BO –> Enfold –> General Styling –> Quick CSS

    Credentials are in the Private Content.

    Thank you.
    Elia

    #779626

    Hi,

    It will work like this:

    
    @media only screen and (max-width: 350px){
        div.flex_cell.no_margin.av_one_half.avia-builder-el-13.el_before_av_cell_one_half.avia-builder-el-first { 
            background-image:url(https://www.rogercat.com/wp-content/uploads/2016/05/22-1030x686.jpg) !important;
        }
    

    and no need to copy all other rules if they stay the same.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #783886

    I’ll try this weekend if it works.
    Thank you very much!
    Elia

    #785037

    Hi Elia,

    Let me know how it works for you :)

    Best regards,
    Victoria

    #785342

    IT DOSEN’T… At this point I don’t know if you are trolling me or what, because I gave all my site’s access and you didn’t even try if that code WORKS?
    I need 2 block with 2 images and I want 2 different images with 350/320 pixel’s display.
    Now my client wants only 1 block (so 1 image >720pixel and another image <350pixel).
    It’s 30 april and no one had figured out how to solve this problem.
    There is someone capable to help me or have I to get some payed support?
    For my next site, I’ll use Avada again, at least they have a decent support.

    #786310

    Hi kharsoul,

    I am here to help you to solve issues with our theme, not to build your website. The issue that you have is a basic css issue, it does not require any changes to our theme. I gave you the code, after I tested it on your website, but I am not the one to implement it there.
    Here try this code:

    
    @media only screen and (max-width: 350px){
        div.flex_cell.no_margin.av_one_half.avia-builder-el-13.el_before_av_cell_one_half.avia-builder-el-first { 
            background-image:url(https://www.rogercat.com/wp-content/uploads/2016/05/22-1030x686.jpg) !important;
        }
    }
    

    Disable minification clear the cache and see if the code worked.

    Best regards,
    Victoria

    #786336

    And a nice link for you kharsoul might be: Link

    • This reply was modified 7 years, 6 months ago by Guenni007.
Viewing 26 posts - 1 through 26 (of 26 total)
  • You must be logged in to reply to this topic.