Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 9, 2014 at 6:18 pm #262513
    Angiec13

    Hi guys- This theme is super fun to work in. I have two questions that involve browser/screen size spacing issues.

    http://162.243.199.220/

    1. Layer slider– http://grab.by/wKgs My coffee cup is supposed to be flush with the right, it looks like it is on my widescreen and in the preview, but in some screens is not. Can you give me some direction on how best to handle this?

    2. Footer background image– http://grab.by/wKgm I need to make sure the lighter grey background sits behind that menu on every browser/screen size except mobile/ipad (I have it coded to disappear then). I am not sure how to make that happen via css. Do you have some css that would at least get me started?

    May 10, 2014 at 3:33 am #262699
    Ismael

    Hi Angiec13!

    Thank you for using the theme!

    1.) To be honest, this will require a lot of testing on your part but we would like to ask if you set the Responsive Under and Layers Container options on the Slider Settings > Layout > Fullwidth Slider Settings. Default value for both is 1140. Anyway, I tested this on my end, screen resolution is 1366×768, the coffee is properly flush to the right.

    2.) How did you add the background? I just can’t find the selector. You can use this media query to remove it on ipad views:

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

    Regards,
    Ismael

    May 12, 2014 at 5:43 am #263132
    Angiec13

    Hi- I added the footer image in the theme options under general styling – footer – custom background image.
    http://162.243.199.220/
    This is the file–
    http://162.243.199.220/wp-content/uploads/2014/04/footerbg1.png

    I have it disappearing on ipad and below, but I can’t figure out how the css starts for other widths… is it something like this:

    @media screen and (min-width: 1024px){
    /* some CSS here */
    }

    Would I then add the custom background image and what widths should I specify/save my images as?

    I actually tried to just add the background image to the menu on the right side of the footer, but could not remove the padding above/below it. If you think it’s easier to add the grey square as a background to that menu, and know a bit of css I could use– that’s fine, too. The goal is just to have a grey background behind that menu.

    Thanks for your help! :)

    May 12, 2014 at 4:30 pm #263348
    Angiec13

    Hi– So, this might be simpler than I think it is….

    The footer background image is not resizing, so that the light grey background is behind the menu when you re-size the browser window. Is there some css or something I can do in the theme that would fix that and make it so that it resizes in the browser window and on different desktop screen sizes?

    Thanks for your time. :)
    Angie

    May 12, 2014 at 4:59 pm #263360
    Flikk

    why dont you place your menu in an element and set a background color instead of using the background?
    You would have to remove the padding from the footer, but this way you can make sure that it will be the same on every screen.
    Dont know if a negative margin on the element would help so you dont have to remove the padding.

    Resizing the image would result in a lower width of the light grey area while the menu keeps it width. So resizing wont work.

    May 12, 2014 at 5:13 pm #263363
    Angiec13

    Hi- can you give me an example of how to place it in an element as far as the theme/WP is concerned? I know how to apply a class to individual menu items in the appearance -> menus area, but not to an entire menu itself.

    I know it would be some css in the quick css like this:
    .bottom-menu {
    background-color: #cccccc;
    height: 140px;
    width: 140px;
    padding-top:-20px;
    }

    May 12, 2014 at 5:55 pm #263379
    Flikk

    just checked, and it’s allready in <section id=”nav_menu-2″ class=”widget clearfix widget_nav_menu” style=”width: 150px; margin-top: -15px; margin-bottom: -15px; height: 160px; background-color: rgb(223, 227, 233);”

    If you use firefox, you can press <shift> + <F5> to open the developer tools. The inspector helps to locate the elements and show you the size. There is also a 3d view that also helps in some cases to see the elements even better.

    There you also see all the CSS code that affects the element and can do live changes to see how it would look like.

    It helped me to figure out that it is in the section mentioned above.

    So i added in the developer tool your css code, modified it a bit and what i got in the end is:

    #nav_menu-2 {
    background-color: #dfe3e9;
    height: 160px;
    width: 150px;
    margin-top: -15px;
    margin-bottom: -15px;
}

    CSS basics: .menu{ } is for a class while #menu{ } is for an ID
    If you want to make advanced selections you can check for the selectors here: http://www.w3schools.com/cssref/css_selectors.asp

    Think i would be a terrible support member. slow and writing to much. at least i help the real support :P

    May 13, 2014 at 6:42 am #263762
    Ismael

    Hey!


    @Flikk    : Good job! Thanks for helping. :)


    @Angiec13    : Looks like this has been sorted out. You can say thanks to @Flikk. :)

    Regards,
    Ismael

    May 13, 2014 at 10:25 pm #264289
    Angiec13

    Yes, thanks @Flikk! This was a huge help and allowed me to get it sorted out/taught me more for the future. :)

    Thanks again!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Browser/screen size css for layer slider and full width background’ is closed to new replies.