Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • December 30, 2014 at 4:38 am #372965
    jolamptey

    Hi,

    I am having trouble creating a mobile friendly custom background image. The image does not fully appear on a mobile friendly device, but looks fine on a computer. I am not sure if I need to add a custom id attribute to my color section, but can you take a look at the link I provided and provide any assistance.

    Thanks in advance as I have been stumped on this one for a while.

    December 30, 2014 at 12:36 pm #373043
    Yigit

    Hey jolamptey!

    You can add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 480px) {
.home div#av_section_1 { background-size: contain; }}

    Image would be responsive but that would cause a big white space

    Regards,
    Yigit

    January 3, 2015 at 1:49 am #374365
    jolamptey

    Hi Yigit,

    Thanks for the prompt response. I entered the information you provided, however nothing has changed when I look at it from a mobile device. The picture is not responsive. Am I doing something wrong?

    January 4, 2015 at 6:57 pm #374744
    jolamptey

    Hi Yigit,

    I just realized that I was putting the code you provided me into the Google Analytics section instead of the Quick CSS section. I have now corrected that and see the white space you are referring to. Is there any way to avoid that white space?

    My goal was to create a homepage like the following: http://morikami.org with Enfold. Is it possible to do this?

    I am even willing to remove the background image on the mobile view if thats possible? If you could provide me the quick css to do that I would appreciate it.

    Thanks for any help you can provide.

    January 5, 2015 at 3:03 am #374887
    Ismael

    Hey!

    You can remove the background on mobile device with this:

    @media only screen and (max-width: 480px) {
.home div#av_section_1 { background: none !important; }}

    Regards,
    Ismael

    January 5, 2015 at 4:49 am #374946
    jolamptey

    Thanks Ismael, anyway you can help provide me a css entry to remove invisible padding of 640px on the homepage? I was able to remove it in Google Inspector element, however I am not sure how to translate this over to my css file.

    January 5, 2015 at 2:53 pm #375074
    Yigit

    Hi!

    Have you removed it already? I cannot see 640px of padding on your home page. If you have not removed it already, please post a screenshot and show

    Cheers!
    Yigit

    March 17, 2016 at 8:33 pm #599938
    rkb317

    Hmm I’m having the same issue but when I tried your code it wasn’t working for me.
    The image is perfect on the desktop but the top and sides get cut off on mobile – help!

    March 21, 2016 at 3:57 am #600960
    Ismael

    Hi!


    @rkb317    : Did you use the color section element? Please provide a link to the page in question. Note that the background size property will be set to “cover” if the “Background Repeat” option is set to “Stretch to Fit”. This means that the image will cover the whole container but it may cut off parts of the image to keep its aspect ratio. http://www.w3schools.com/cssref/css3_pr_background-size.asp

    Regards,
    Ismael

    March 22, 2016 at 4:55 pm #601974
    rkb317

    Thanks for the response – yes I did use the color section element…? See link below – can I just add code to just make the image responsive?

    March 25, 2016 at 9:38 pm #603719
    Andy

    Hi!

    try to control the image with this code inside your Quick CSS field:

    .av-parallax-inner.main_color.avia-full-stretch {
background-position: -45px -27px !important;
background-size: 105% 88% !important;
}

    If you want to control it on mobile devices then add some media queries to the code:

    @media screen only and (max-width: 767px) {
.av-parallax-inner.main_color.avia-full-stretch {
background-position: -45px -27px !important;
background-size: 105% 88% !important;
}
}

    and adjust max-width value as needed.

    Cheers!
    Andy

    February 23, 2017 at 10:28 pm #751077
    pkonstan

    How would you do this to other pages besides the home page?

    February 28, 2017 at 10:14 pm #753277
    Nikko

    Hi,

    The code Andy given should be working on other pages as well, it would only apply to homepage if you can see this in the code .home.

    Best regards,
    Nikko

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.