Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • May 15, 2014 at 2:56 pm #265303
    changegroup

    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

    May 15, 2014 at 6:54 pm #265436
    Yigit

    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

    May 21, 2014 at 1:34 pm #267982
    changegroup

    Hi Yigit,

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

    Best regards,
    ChangeGroup

    May 21, 2014 at 2:05 pm #267992
    Yigit

    Hi!

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

    Best regards,
    Yigit

    July 4, 2014 at 2:33 pm #287204
    changegroup
    This reply has been marked as private.
    July 4, 2014 at 4:16 pm #287253
    Yigit

    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

    July 4, 2014 at 4:55 pm #287275
    changegroup
    This reply has been marked as private.
    July 4, 2014 at 5:00 pm #287278
    Yigit

    Hi!

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

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

    Regards,
    Yigit

    July 4, 2014 at 5:16 pm #287289
    changegroup
    This reply has been marked as private.
    July 4, 2014 at 5:22 pm #287294
    Yigit

    Hi!

    Please change the code to following one

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

    Best regards,
    Yigit

    July 4, 2014 at 5:39 pm #287303
    changegroup
    This reply has been marked as private.
    July 4, 2014 at 6:12 pm #287321
    Dude

    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

    July 4, 2014 at 6:24 pm #287327
    changegroup
    This reply has been marked as private.
    July 5, 2014 at 4:54 am #287436
    Josue

    Try adding this code too:

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

    Regards,
    Josue

    July 7, 2014 at 9:41 am #287869
    changegroup
    This reply has been marked as private.
    July 7, 2014 at 10:05 am #287878
    Yigit

    Hey!

    Please use following code in Quick CSS

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

    Regards,
    Yigit

    July 7, 2014 at 3:25 pm #288008
    changegroup
    This reply has been marked as private.
    July 9, 2014 at 2:19 am #288745
    Devin

    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

    July 9, 2014 at 9:20 am #288893
    changegroup
    This reply has been marked as private.
    July 12, 2014 at 3:02 pm #290490
    Dude

    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

    July 14, 2014 at 10:47 am #290923
    changegroup
    This reply has been marked as private.
    July 18, 2014 at 10:47 pm #293169
    Devin

    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

    July 21, 2014 at 9:55 am #293761
    changegroup
    This reply has been marked as private.
  • Author
    Posts
Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Best way to insert a Fullwidth banner?’ is closed to new replies.