I've been working on a website for our family business and we have a product page which outlines our four key products. It's a bootstrap template that we purchased from wrapboostrap.com (I'm no graphic designer!) and all has been going well. This page however (http://ashfieldclutch.azurewebsites.net/Products) has been giving me a headache.
Occasionally on either mobile or desktop devices the layout plays up (see attached images).
If you reload the page on either platform, it loads perfectly afterwards. I seem to be able to stop this behavior by removing this div:
<div class="row portfolio-wrapper">
However, on mobile devices, this removes the spacing I require between the product types so ideally it needs to stay.
Can anyone see what may be causing this issue?
Thanks in advance,
Paul.
I've refreshed more than 20 times, but I've seen it.
It's not about the classes in <div class="row portfolio-wrapper">, but about the inline styling that's added to this div by your templates Javascript. It happens to miscalculate the height of the div container class .portfolio-wrapper once in a while, which causes the lower content to move up. Since I can't inspect the Javascript, I can't help you much further.
I think you're best of by contacting the template author, he can and will probably find you the cause.
I was able to simulate it on my side and found the fix. It happens in Chrome and Firefox, so I don't think it's a browser-specific issue.
There is inline style being added to that <div> that seems to be calculating the height incorrectly. I changed the height from 1402.234375px to 1602.234375px and that seems to resolve it.
See before and after screenshots below.
I think there might be some Javascript code that might be calculating the heights and adding them to the <div> on the fly.
For the permanent fix, you will have to fix the code that is generating these heights. I will continue to look on my side also for that code.
Before Fix:
After Fix.
Related
I have searched stack overflow, googled, and gone to apple's documentation regarding a problem that I've encountered in my Cordova Html5 iOS 11+ app. The app plays videos. It works fine except there is a gray overcast button on top of the video that should display the iOS icons. The button is simply a gray "blob". This happens when the video is first loaded and then again when it is ended.
It looks like this (Upper left screen corner:
I've tried using many css workarounds that I found on stack overflow and also on some of my other searches. I thought that this is/was a css problem, but I'm just at a loss. I can't find anything in the Safari docs. The closest I came was a post regarding a gray background issue when playing video. That was solved using brightness. It didn't work at all for my issue. I also couldn't hide the gray buttons.
The video is standard html5:
<video src="myVideo.mp4" controls poster="myPoster.png" height="auto" width="100%">
</video>
Thank you ahead of time for your help. If I need to add more information, I can do that. I just don't want to add things that aren't needed.
-Rachel
If you could provide a sample page where this problem occurs that would make it a lot easier.
I'm pretty sure this should be possible with css though. Maybe not the most "beautiful" way to go at this but what I would do is to find the markup of this element and look what css selectors and rules there are which effect it. Then copy the css selector in your own stylesheet and maybe add some class or id to it to make sure it overrides these rules and then simply add a display: none; to it.
Maybe give !important a try too if it doesn't work right away.
In the dev tools you can add css rules directly so you can just go through the elements and add display: none; there, to see which element you need to refer to in your file.
But again, it's really hard to tell without an example to look at.
I am trying to replicate my Fiddle I have here on the website I am working on, but seems with the WidgetKit for Joomla the coding or CSS is effecting it. Fiddle is here: [http://jsfiddle.net/vZNj7/44/]
<div class="brand-wrap-bg">
<div class="image-cropper-brand" style="background-image: url('http://www.kanzenint.com/nkliq.com.au/nkliqjoom3/images/untitled-1_03.jpg');"> </div>
<div class="brand-text">This is where the overview text is going to be</div>
</div>
This is my template so far: http://www.kanzenint.com/nkliq.com.au/nkliqjoom3/index.php/k2-users/k2-extra-fields/k2-extra-field-groups/k2-media-manager/k2-information/brand-story
You wont be able to see the DIV, but its under the top menu DIV at the moment (purposely as I want the background under the header)).
I also want to make it so that the browser window will crop the bottom if the window is resized or for people who have different window sizes.
I have been trying to work out why I cannot get it to work. Close to 5am and nesrly given up :(. Thanks a lot for any help.
I have worked it out after getting onto a Win8.1 machine and using the devtools on IE11 since the previous versions are such a piece of crap and next to not usable.
I was using the 'initial' for position but seems that IE does not like 'initial' and doesnt recognise it? So I used 'Static' instead and seems to get it to work.
The reason I needed to revert back to it as Widgetkit was using inline styles that couldnt be removed (well they probably could but I couldnt see it in the template) so the inline styles needed to be basically reverted back to a default value.
Hopefully this helps someone even though no one helped me :(
I have an HTML page that loads one way the first time you load it and another way the second time. This is reproducible using Chrome in private mode (because it clears the cache each time).
FIRST TIME:
SECOND (AND LATER) TIME:
I haven't seen a problem like this before, and am having trouble searching other complaints on this. Any advice on where to start investigating?
EDITS
Thanks for all the feedback. Just to clarify a few things. The CSS is standard Bootstrap 3.0 only, there is no other styling or CSS. The URL is https://www.acls.net/index-exp120.php and this is Chrome Private mode with all extensions disabled. I only see this issue in Chrome, have updated title to reflect that.
Ok - the issue depends on multiple things
only might happen with an empty cache
depends on the loading speed of font-awesome & bootsrap - if they load faster than your logo or not...
So while running Chrome in Incognito Mode and reloading again and again eventually I could reproduce the issue.
You cannot easily fix the loading race condition but fixing your css should work :
add class pull-left to your logo
clear the floated area by applying class clearfix to the page-header
Its not necessary but good choice, add width & height to your logo image so it doesn't pop in once loaded
So here it is:
<div class="page-header clearfix">
<a href="/" class="logo pull-left"">
<img src="images/logo.png" height="62" width="232" alt="">
</a>
Hope that helped.
Some main issues to look into.
Browser size.
Is it wider at one point than the other?
It's obviously within the same browser but just in case, I would test this in multiple browsers, because you do want your code to be cross compatible.
To me it looks like a width problem.
Perhaps you have a #login div, or some oddly named, at the top right that contains that content and floats it, and being that the content is not responsive, but the div itself is. When the div shrinks a little the content itself doesn't and pushes the rest of the content down.
I'm trying to make a sample web page to get acquainted with HTML5, and I'd like to try replicating Facebook's page layout; that is, the header that spans the entire width of the screen, a small footer at the bottom, and a three-column main body, consisting of a list of links on the left, the main content in the middle, and an optional section on the right (for ads, frames, etc.). It's neat and displays well in multiple window sizes.
So far, I've tried to accomplish this with a <header>, <footer> and a <nav> and <section> block, respectively. There's a few anomalies with the page, however. The footer (which contains a simple text block with copyright info) appears at the top-right of the page below the header when the window is maximized. On the other hand, when there isn't enough space to display everything in the window, it places the main body text below the section. In other words, it keeps moving elements around to fit the window.
Could someone please tell me how I'd achieve the look I'm going for? I've tried playing around with a few CSS attributes I read about through Google, but I'm pretty sure I don't know what I'm doing, and could really use some guidance.
Thank you!
This isn't an HTML5 question as much as it is a basic understanding of HTML and CSS. If you're going to jump in to web dev you're going to need to understand basic CSS like floating etc. I would recommend some tutorials on YouTube or NetTuts. Just play around with a few divs, move them around the page, manipulate them with CSS and it will start to come together. Then making a three column layout with fixed header and footer will seem like a piece of cake.
Floating Divs w/ CSS
I find CSS to be super hard. It is quite difficult to make a page that looks good and works on lots of different platforms and browsers. You may find it easiest to use a css framework, such as Bootstrap.
Drop that into your website, and use it to make your layout. Use the dev tools for your browser (Firebug for firefox) to examine the styles that are being applied to the various elements. Modify the styles to suit your needs.
HTML5 doesn't really give you a page layout for free. The elements you mention (header, section,etc) are used to create semantic pages, rather than to specify how they should be displayed.
Can't help much without your code. But I am sure it is because of float issue. add this CSS property to your footer clear: both
Hope it might help.
I'm not sure if you're trying to make yourself a little hack, or if you're looking for a complete library that will do all this for you, but if you're looking for the latter, I recommend Twitter Bootstrap, which is a cross-platform solution for implementing many HTML5 features, and even resorts to fallbacks for non-modern browsers. The only drawback is the requirement of jQuery in order to initialize the components that are responsive*. However, this is optional if you are not looking to implement these features. The responsive design, amazingly, does not require javascript since it is pure CSS. Hope this helps!
*Edit: meant "interactive" there, not "responsive."
I am currently using a modified version of this theme to display an annual report:
http://www.elegantthemes.com/preview/ElegantEstate/
I can't link the report as our project manager wants to keep the site private until launch.
The project manager is complaining of a strange loading pattern where some content in the features slider shows up before the first slide for a few seconds, until the page is completely loaded. I do not have this problem myself.
Could anyone explain why this might be happening, and how I could fix it? Could I install a plugin that would pre-load the entire page or something like that?
I tried an image pre-loader plugin that did not solve the problem.
Thanks for your help.
Many sliders employ a technique where all of the content is loaded in the html, something like:
<div id="slider">
<div class="pane">
content
</div>
<div class="pane">
content
</div>
<div class="pane">
content
</div>
</div>
While the height and width of the combination of all three individual pane heights and widths, it will be larger than your slider wrapper div. For those who do not use JS, this is what they will see. This is considered to be graceful degradation, whereby they will not get the fancy slider, but they still will be able to see the content.
Once the JS loads in the page, the slider script most likely applies CSS rules that limit the size of the viewable slider area. The slider will likely get height and width parameters and an overflow declaration, something like:
width:200px;
height:200px;
overflow:hidden;
Once those rules take effect, the slider will look as it should. Until that happens, your slider will look nothing like a slider and all of the content will be viewable in a very ugly fashion.
The reason why your project manager is seeing it differently than you may be due to different connection speeds or individual browser inconsistencies. It sounds to me like your slider is working, you just want it to do something that it's not meant to do.
I think you might be able to hack this to work the way you want by adding rules similar to the ones I showed above to the containing div in your CSS style sheet.
I know you cannot post the url here, but if you can post or link to some JS, HTML, and/or CSS for the slider (or even the slider script used in this project), we might be of more help.