Tagged: media query, mobile, responsive
-
AuthorPosts
-
February 20, 2017 at 11:11 am #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, 9 months ago by kharsoul.
February 20, 2017 at 11:25 pm #749659Hey 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,
NikkoFebruary 22, 2017 at 4:07 pm #750532Hi, 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 #752211UP.
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 #752486Hi,
Can you please create a temporary admin login and post it here privately so we can look into it?
Best regards,
YigitMarch 2, 2017 at 10:05 am #754226The credentials are the same of the other topic. :)
I posted in “private content”.
Thank you!March 2, 2017 at 10:19 pm #754647Hi!
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,
YigitMarch 3, 2017 at 1:37 pm #755035I’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 #755041Hi,
You had errors in your custom CSS code. I fixed them and flushed cache. Please review your website now
Best regards,
YigitMarch 6, 2017 at 6:41 pm #756547what 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 #760004Hi,
Do you still need any help with the issue?
Best regards,
VictoriaMarch 14, 2017 at 9:56 am #760542Yes, the problem persists.
March 16, 2017 at 6:45 pm #762108Hi 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,
VictoriaMarch 17, 2017 at 2:40 pm #762508Yes 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.pngWith 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.
March 21, 2017 at 11:13 am #764106Hi 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,
VictoriaMarch 29, 2017 at 9:01 am #768676Sorry 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
EliaMarch 31, 2017 at 1:34 pm #769936Hi 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,
VictoriaApril 14, 2017 at 4:24 pm #777872I 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 mobileThank you
April 17, 2017 at 6:46 pm #778857Hi kharsoul,
Show me the code and where did you put it?
Best regards,
VictoriaApril 18, 2017 at 12:06 pm #779221In:
- wp-content/themes/enfold/css/custom.css
- in the BO –> Enfold –> General Styling –> Quick CSS
Credentials are in the Private Content.
Thank you.
EliaApril 18, 2017 at 8:19 pm #779626Hi,
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,
VictoriaApril 27, 2017 at 9:14 am #783886I’ll try this weekend if it works.
Thank you very much!
EliaApril 29, 2017 at 5:27 pm #785037Hi Elia,
Let me know how it works for you :)
Best regards,
VictoriaApril 30, 2017 at 6:20 pm #785342IT 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 #786310Hi 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,
VictoriaMay 2, 2017 at 1:52 pm #786336 -
AuthorPosts
- You must be logged in to reply to this topic.