Tagged: colorbox, height, responsive
-
AuthorPosts
-
March 5, 2014 at 8:57 pm #232918
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/Fc9bosgHS9
Any idea how I can fix this?
March 6, 2014 at 6:12 am #233059Hey 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,
IsmaelMarch 6, 2014 at 6:42 pm #233346Hi 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:
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, 9 months ago by biklops.
March 7, 2014 at 5:24 am #233584Hi!
Please add this on your custom.css or Quick CSS:
@media only screen and (max-width: 481px) { #big-headline { min-height: 400px !important; } }
Regards,
IsmaelMarch 11, 2014 at 3:39 pm #235542Ismael, 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 #235705Hi!
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,
IsmaelMarch 19, 2014 at 9:16 pm #240359Hi 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.
-
AuthorPosts
- The topic ‘Still having problems with Colorbox heights’ is closed to new replies.