Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • #265303

    Hi team Enfold,

    What is the best way to insert a fullwidth banner on a page. The banner should be fixed in height for example 100px, so the logo inside the banner is always visible, however responsive so it is always fullwidth.

    Does that make sense?

    Example of a banner: http://cg.madswestermann.dk/wp-content/uploads/2014/01/Test.png

    #265436

    Hi changegroup!

    You can add a Color section element to your page and give it a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png
    and add image element inside that color element then add following code to Quick CSS in Enfold theme options under General Styling tab

    #your-custom-id .container { width: 100%; }

    Best regards,
    Yigit

    #267982

    Hi Yigit,

    Thank you very much!! I will try that in near future and get back to you about the outcome.

    Best regards,
    ChangeGroup

    #267992

    Hi!

    Sure, we will be waiting to hear from you :)

    Best regards,
    Yigit

    #287204
    This reply has been marked as private.
    #287253

    Hey!

    You have an hidden HR element in there. Please edit your page and remove it from the top of your page content :)

    Best regards,
    Yigit

    #287275
    This reply has been marked as private.
    #287278

    Hi!

    You can increase the top padding only on your homepage with following code

    .home #main {
    padding-top: 215px!important;
    }

    Regards,
    Yigit

    #287289
    This reply has been marked as private.
    #287294

    Hi!

    Please change the code to following one

    @media only screen and (min-width: 990px) {
    .home #main { padding-top: 215px!important; }}

    Best regards,
    Yigit

    #287303
    This reply has been marked as private.
    #287321

    Hi!

    You can add a whitespace for mobile devices by using another media query for devices with smaller screens (screen size below 990px). I.e. use this code and adjust the padding-top value:

    
    @media only screen and (max-width: 989px) {
    .home #main { padding-top: 215px!important; }
    }
    

    Regards,
    Peter

    #287327
    This reply has been marked as private.
    #287436

    Try adding this code too:

    @media only screen and (max-width: 768px) {
    .home #main { padding-top: 0px !important; }
    }

    Regards,
    Josue

    #287869
    This reply has been marked as private.
    #287878

    Hey!

    Please use following code in Quick CSS

    @media only screen and (min-width: 989px) {
    .home #main { padding-top: 215px!important; }
    }

    Regards,
    Yigit

    #288008
    This reply has been marked as private.
    #288745

    Hi!

    I’m not really sure if this is what you are looking for but you could remove or modify the hr spacing site wide with:

    
    .hr {
    margin: 10px 0 !important;
    }
    

    Otherwise you could turn on custom classes for all elements and then add your own custom rule to a set of classes to control the hr elements more than what the theme offers right now.

    Best regards,
    Devin

    #288893
    This reply has been marked as private.
    #290490

    Hey!

    You can use this code to hide the hr/whitespace on mobile devices:

    
    @media only screen and (min-width: 767px) {
    .hr { display: none; }
    }
    

    If you just want to hide certain whitespaces/hr elements please add a custom class to them and use:

    
    @media only screen and (min-width: 767px) {
    .hr.mycustomclass { display: none; }
    }
    

    to hide these hr elements. Replace “mycustomclass” with your custom css class.

    Cheers!
    Peter

    #290923
    This reply has been marked as private.
    #293169

    Hey!

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    
    #footer .widget {
    padding: 0;
    margin: 30px 0 30px 0;
    }
    

    And then change the margin values as needed/wanted. Put that snippet inside of the same media query you are using to target mobile only so that it effects those screen sizes and not all.

    Best regards,
    Devin

    #293761
    This reply has been marked as private.
Viewing 23 posts - 1 through 23 (of 23 total)

The topic ‘Best way to insert a Fullwidth banner?’ is closed to new replies.