Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #177961

    Hey guys,

    Sorry for the question quantity, these have all been pent up for a while.

    I was wondering how I would go about adding a shadow below the minimized header once you start to scroll, see ex.:
    https://www.picatic.com/

    Also, I’m wondering how I would go about adding a background with rounded corners and a shadow for the columns to sit in. See ex:
    http://granify.com/ <– You need to scroll down to their content.

    In the boxed layout mode, how do I increase the width of the site? The default boxed layout is too small for me.

    And finally, I have made some animated objects in a few columns that involve custom image locations and slide ins. That being said, they look great on a desktop browser but ruin the design completely on mobile. Is there any way I can tell enfold to not display those columns with animations on mobile browsers?

    Many thanks guys!

    #178225

    Hi cyrusis!

    1.) Can you please post a link to your website?

    2.) Edit css > grid.css, look for any #boxed selectors then increase the width.

    3.) Please give us a link to the columns with animations. You can use media queries to target the mobile view.

    Cheers!
    Ismael

    #178329
    This reply has been marked as private.
    #179585

    Hey!

    1.) You can add the shadow using this:

    .fixed_header #header {
    position: fixed;
    box-shadow: 0 10px 10px gray;
    }

    2.) There are lots of section with animated images on the home page. Which one do you want to not display on mobile device? You can use the Media Query on custom.css. Inspect the element then add a display: none property.

    @media only screen and (max-width: 767px) {
      /* Add your Mobile Styles here */
    
    }
    

    Best regards,
    Ismael

    #179985

    Awesome thanks Ismeal.

    I might need help with the Media Query css.

    I want all of those animations to be hidden for the mobile view. I’m not very familiar with the CSS to isolate columns or sections? Or do I just add this for each image that is animated? Because I don’t want big white gaps between the paragraphs on the mobile view either…

    And this question was unanswered:
    I’m wondering how I would go about adding a background with rounded corners and a shadow for the columns to sit in. See ex:
    http://granify.com/ <– You need to scroll down to their content.
    Would this just be a matter of making a large background image? Or can I give columns their own background images?

    And lastly! (I need to tip you guys some BTC, honestly. haha)
    How do I make the header transparent? I want the header to be fully transparent when it’s in full view, but to stay how it is now when someone scrolls down.
    Similar to the effect in: https://www.picatic.com/

    Thanks Ismeal!!

    #181556

    Hi!

    1) Please add following code to Quick CSS in Enfold theme options under Styling tab

    @media only screen and (max-width: 768px) { .avia_transform .avia_start_animation.right-to-left.avia_image, .avia_transform .avia_start_animation.bottom-to-top.avia_image,
    .avia_transform .avia_start_animation.top-to-bottom.avia_image { -webkit-animation: none; -moz-animation: none; -o-animation: none; animation: none; }}

    2) I cannot see a background with rounded corners on the link you have posted. Can you post a screenshot instead?
    3) You are going to need to hire a freelance developer for that kind of a customization if you really need it

    Regards,
    Yigit

    #185481

    Hi Yigit,

    I entered this code in but no luck. The images are still displaying on mobile. I really just want to hide those three columns with animated images on the home page from being seen on the mobile devices are they are positioned by pixel distances and appear out of whack.

    For the sake of not uploading, and what I meant about adding a background to a section in this case with rounded corners, please see:
    http://granify.com/pricing/

    How would I go about adding a section like that into enfold?

    Thanks for your help!

    #185832

    Hey!

    Please add following code to remove those images on mobile view

    @media only screen and (max-width: 480px) { #av_section_3 img { display: none; }}

    I think you can add Color Section element, give it an ID and add 1/1 column element inside of that color section and then we can provide you custom CSS. It should work

    Cheers!
    Yigit

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Just a few questions…’ is closed to new replies.