-
AuthorPosts
-
January 23, 2017 at 3:52 pm #737289
How to make the background photo smaller for mobile devices in color section
Quick css for mobiles pleaseJanuary 24, 2017 at 6:21 am #737530Hey endanight,
Could you post a link to the page in question so that we can take a closer look please?
Best regards,
RikardJanuary 25, 2017 at 4:15 pm #738439It is on the mobiles, I want the images smaller
January 30, 2017 at 1:25 pm #740166Hi,
I’m not sure you would like the result if we change the background size not to show bigger than the full width of the mobile device, but try adding this css code in Quick CSS (located in Enfold > General Styling):
@media only screen and (max-width:767px) { .avia-section { background-size: 100% auto !important; } }
Best regards,
NikkoJanuary 31, 2017 at 1:16 pm #740604It is not working. I have changed for this one:
@media only screen and (max-width:480px) {
.avia-section {
background-size: 100% auto !important;
}}But neither
January 31, 2017 at 11:17 pm #740917Hey,
I do see this css code which is working:
@media only screen and (max-width:480px) { .avia-section { background-size: 400px !important; }}
You would notice the background image smaller on mobile device (portrait mode), the background image wouldn’t cover the whole section because the background image size is made smaller. The background image with 2 guys is already small when I check.
Cheers!
NikkoMarch 25, 2020 at 6:51 pm #1197801Hi,
I did use this and it worked fine for the width of the picture – is there a way to also change the height of the section?
I tried adding
heights: 50% !important;
but without changes.
Is there a different way?Thanks in advance
March 27, 2020 at 10:28 am #1198278Hi Powtin,
Can you replace the code I gave above with this one:
@media only screen and (max-width:480px) { .avia-section { background-size: 400px !important; } .responsive #top #wrap_all .av-minimum-height-75 .container { max-height: 220px; } }
Best regards,
NikkoMarch 27, 2020 at 11:59 am #1198303Hi this worked fine for the given webpage – i included two other links below where i have a similar problem – is it possible to have the height of the picture responsive so that the whole picture is showing?
one page uses a 100% and the other one is 75% as well.
Thanks a lot,
KonstantinMarch 27, 2020 at 12:47 pm #1198313Hi Konstantin,
Do this instead:
1. Edit each Color section mentioned, then go to Advanced tab, click Developer Settings and in Custom CSS Class put section1 (this can be any name, for other sections you can put section2 or section3, etc) just keep in mind if you want to use the same styles (example max-height) you can use the same name.
2. Remove the code I gave and replace it with:@media only screen and (max-width:480px) { /* SECTION 1 */ #top #wrap_all .section1 { background-size: 400px !important; } .responsive #top #wrap_all .section1 .container { max-height: 220px; } /* SECTION 2 */ #top #wrap_all .section2 { background-size: 420px !important; } .responsive #top #wrap_all .section2 .container { max-height: 240px; } }
You can see the pattern in the code, just replace the background size and max height as needed. This should make it more flexible.
I hope this helps.
Best regards,
Nikko -
AuthorPosts
- You must be logged in to reply to this topic.