Tagged: , ,

Viewing 26 posts - 1 through 26 (of 26 total)
  • Author
    Posts
  • February 20, 2017 at 11:11 am #749261
    kharsoul

    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, 10 months ago by kharsoul.
    February 20, 2017 at 11:25 pm #749659
    Nikko

    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

    February 22, 2017 at 4:07 pm #750532
    kharsoul

    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!

    February 27, 2017 at 9:58 am #752211
    kharsoul

    UP.

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

    February 27, 2017 at 8:54 pm #752486
    Yigit

    Hi,

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

    Best regards,
    Yigit

    March 2, 2017 at 10:05 am #754226
    kharsoul

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

    March 2, 2017 at 10:19 pm #754647
    Yigit

    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

    March 3, 2017 at 1:37 pm #755035
    kharsoul

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

    March 3, 2017 at 1:49 pm #755041
    Yigit

    Hi,

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

    Best regards,
    Yigit

    March 6, 2017 at 6:41 pm #756547
    kharsoul

    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!).

    March 13, 2017 at 1:56 pm #760004
    Victoria

    Hi,

    Do you still need any help with the issue?

    Best regards,
    Victoria

    March 14, 2017 at 9:56 am #760542
    kharsoul

    Yes, the problem persists.

    March 16, 2017 at 6:45 pm #762108
    Victoria

    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

    March 17, 2017 at 2:40 pm #762508
    kharsoul

    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, 9 months ago by kharsoul.
    March 21, 2017 at 11:13 am #764106
    Victoria

    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

    March 29, 2017 at 9:01 am #768676
    kharsoul

    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

    March 31, 2017 at 1:34 pm #769936
    Victoria

    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

    April 14, 2017 at 4:24 pm #777872
    kharsoul

    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

    April 17, 2017 at 6:46 pm #778857
    Victoria

    Hi kharsoul,

    Show me the code and where did you put it?

    Best regards,
    Victoria

    April 18, 2017 at 12:06 pm #779221
    kharsoul

    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

    April 18, 2017 at 8:19 pm #779626
    Victoria

    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

    April 27, 2017 at 9:14 am #783886
    kharsoul

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

    April 29, 2017 at 5:27 pm #785037
    Victoria

    Hi Elia,

    Let me know how it works for you :)

    Best regards,
    Victoria

    April 30, 2017 at 6:20 pm #785342
    kharsoul

    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.

    May 2, 2017 at 12:56 pm #786310
    Victoria

    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

    May 2, 2017 at 1:52 pm #786336
    Guenni007

    And a nice link for you kharsoul might be: Link

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