Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 3, 2016 at 12:56 am #719964
    getmebrian

    Hi there,

    We are using the full-width slider on our home page and have activated two buttons under the “Caption” tab. The buttons look great until the screen scales down to below 1100 pixels wide (buttons get cut off at about 1068 px wide). Everything scales nicely again when the screen reaches ~766 px wide, but when the screen is between 767 and 1100, it’s messy.

    Any ideas? Thanks!

    URL: http://nwl.brianhbirch.com

    Brian

    December 4, 2016 at 5:17 am #720132
    Rikard

    Hi Brian,

    You have this in your enfold-child.css file:

    .html_header_transparency #top .avia-builder-el-0 .container {
  margin-top:110px;
}

    I’m guessing it’s something you want to keep so you can try the same code in a media query with a lower value:

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
.html_header_transparency #top .avia-builder-el-0 .container {
  margin-top:40px;
}
}

    Add it to Quick CSS to see if you have any luck with it.

    Best regards,
    Rikard

    December 4, 2016 at 9:02 pm #720241
    getmebrian

    Thanks Rikard. I added this to Quick CSS, but do not see any difference. The buttons and text aren’t scaling between 768 and 1024 and therefore they start to disappear (or get cut off) until they resize when the screen size reaches 768.

    Brian

    December 5, 2016 at 7:55 am #720347
    Rikard

    Hi,

    Ok, I’m still seeing that top margin code being applied to the element. Please note that that code will apply to the first element on every page you create with the builder so I would highly recommend that you remove it.

    You can try to make the font size a bit smaller using this CSS:

    
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.home .slideshow_align_caption h2 {
  font-size: 40px !important;
}
}

    Best regards,
    Rikard

    December 5, 2016 at 10:46 pm #720718
    getmebrian

    Thanks, the CSS you are seeing was not directly added by me. I selected under Theme Options > Header > Header Custom Height. We used the drop-down to change it from 100px to 110px. This must then have added it to the Child css file.

    When I set it back to 100, the issue is still there. Also, when I go to Appearance > Editor > Style.css, I see this: http://imgur.com/a/zzvnS

    I see no added CSS here… and it does not exist under Quick CSS.

    The code above mostly works, but just wanted to raise a red flag that this is is an issue (only on the home page where we are using a transparent header.)

    Thanks,

    Brian

    December 6, 2016 at 12:05 pm #720945
    Rikard

    Hi Brian,

    Ok, thanks for the feedback. Let us know if you should need any further help on the topic.

    Best regards,
    Rikard

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