Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 5, 2014 at 8:57 pm #232918
    biklops

    Hi all!

    Check this page out: tackettmull.com/mobile

    The first colorbox element is currently set to “no minimum height, use content to determine height.” Yet the colorbox has this .css upon load:

    element.style {
    background-attachment: fixed;
    background-image: url(“http://tackettmull.com/wp-content/uploads/2013/11/orion-nebula-space-galaxy.jpg”);
    background-position: center top;
    background-repeat: no-repeat;
    height: 802px;
    }

    This “height: 802px” is cutting off content on mobile like so: https://www.dropbox.com/sc/e3fbnu46hxcqi4n/Fc9bosgHS9mobile screen

    Any idea how I can fix this?

    March 6, 2014 at 6:12 am #233059
    Ismael

    Hey biklops!

    How are you? I hope you’re doing well today.

    You’re using a very old version of the theme. Please download the latest version 2.5.4 of Enfold on your themeforest account. Update the theme via FTP. Watch this video by Devin: http://vimeo.com/channels/aviathemes/67209750

    Anyway, the site looks fine when I checked it on smaller screens. The three buttons are not being cut off.

    Best regards,
    Ismael

    March 6, 2014 at 6:42 pm #233346
    biklops

    Hi Ismael I’m doing well! t/hanks for responding. I’ve upgraded Enfold and still have the issue.

    Are you actually looking on a mobile device? The issue is this:

    proof of concept

    As you can see, a colorbox asked to use “No minimum height” still only ever stretches to the full height of the viewport. So, on an iphone screen the content in the colorbox gets cut off. If you’re looking at a tall responsive desktop screen you’re not seeing this problem.

    • This reply was modified 10 years, 8 months ago by biklops.
    March 7, 2014 at 5:24 am #233584
    Ismael

    Hi!

    Please add this on your custom.css or Quick CSS:

    @media only screen and (max-width: 481px) {
#big-headline {
min-height: 400px !important;
}
}

    Regards,
    Ismael

    March 11, 2014 at 3:39 pm #235542
    biklops

    Ismael, any insight as to why the colorbox element doesn’t react to the height of the content it contains? Is this issue only on mobile/pad? I’ve been having issues with the colorbox element for a few versions now and want to make sure I know the appropriate best practices.

    March 11, 2014 at 5:50 pm #235705
    Ismael

    Hi!

    I’m sorry but the site looks ok when I check the site here: http://quirktools.com/screenfly/#u=http%3A//tackettmull.com/mobile&w=320&h=568&a=37

    The color box section’s height adjusts properly. The height should adjust according to the section’s content unless you define a specific height using css. Can you please post the second screenshot again? Add this on Quick CSS to fix the font size of the buttons. 

    @media only screen and (max-width: 767px) {
span.avia_iconbox_title {
color: white;
font-size: 15px;
}
}

    Did the code on my previous post fix the height issue on mobile view? Let me ask Devin and Josue to check this on their iOS device.

    Regards,
    Ismael

    March 19, 2014 at 9:16 pm #240359
    biklops

    Hi Ismael! Sorry I ended up solving these issues with some sloppy “!important” declarations. It is reproducible however—if a colorbox is set to “auto” height and that height would be higher than an ios screen height the content will be cut off.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Still having problems with Colorbox heights’ is closed to new replies.