I need some CSS help
Some users are reporting problems with accessing BlenderNation and I could use some help from a CSS wizard to fix this!
Here are some of the reports I’ve received;Hello i’m using firefox and if the width of the window is too narrow i can’t view the posts.
Another one, which seems to be related:
When I set the Text on my computer screen to Medium 125%, BlenderNation doesn’t properly display. Everything in the left side column is pushed down to the bottom of the page. The top part is blank. I have to scroll waaaaay down to see any of the content.
It displays properly when the text is set to Normal (100%). It’s been doing this for the last two or three months. First it was just the front page but as time goes on, more and more of the pages are having the same problem.
I have Windows 7. A 32 inch wide screen LCD monitor. A Nvidia video card.
And:
I use win xp with opera or firefox. Screen size is 1024×768. When I now open blendernation.com I can see all topics for a millisecond. Then everything turns white. That’s new: Last week evrything was white from the beginning. I have no problems with the rest of the internet.
One that’s a little different:
Longtime fan here, love the stie. Recently the front page of BlenderNation is coming up blank for me. More specifically it looks like the content flashes up, then the ad appears, and all the content vanishes. The ad, banner, and sidebar are still there. Happening in Chrome and Firefox in Windows. Any advice appreciated! Thank you.
My javascript console in Chrome says this:
Resource interpreted as Script but transferred with MIME type text/x-js: “http://www.blendernation.com/wp-content/themes/blendernation-v3/js/ads.js”. (index):70
‘Attr.nodeValue’ is deprecated. Please use ‘value’ instead. adsbygoogle.js:32
‘HTMLHeadElement.profile’ is deprecated. The reflected attribute has no effect. VM44:3
but they just look like warnings.
I have no plugins that would block JavaScript. Very weird.
Any idea what’s going on here? I’ve tried debugging the issues, but couldn’t figure them out. A little help would be much appreciated!
Give .listing a clear:left – they’re there but off the page or don’t float left the .ads-widget div
Hmm, I know this is not helpfull: but I couldn’t reproduce any of the problems mentioned (I tried chrome, firefox, IE8 and Safari on W7prof). I will see if I have some time this evening to go through it more carefully.
In the meantime I can advice everyone to update browsers. This will not only help with such issues, but also keep your internet experience safer.
I don’t hold out much hope for fixing the win xp guys issue except to re code the site in HTML4!the issue seems to be with the screen width as the issues only seem to appear when the window is scaled down. and i have only been able to reproduce this issue where the main content of the home page is hidden. secondary content and the side bars look like they have adjusted properly. i don’t see the issue with safari.
only chrome and mozzilla
Not necessarily, you can use moderinzr.js to convert HTML5 into HTML4 for older browsers. http://modernizr.com/
It shouldn’t be more difficult than including the javascript. It still sounds like this is a css issue though.
My solution is to view the web traffic and figure out how much time you should dedicate to supporting older browsers, if it is less than a couple percent traffic, maybe not spend the time.
As for the last guy, clearly the code is deprecated, have you tried changing it?
A quick google search can help if you don’t know how.
I couldn’t replicate this, even tried editing some of the scripts but it won’t work. Odds are he’s at work or something and has an old version of his browser.
I had the opportunity to test the Blendernation front page at work with a variety of monitors on the same computer and browser. There is a significant difference when viewing on a monitor with a 4:3 aspect ratio. Stuff gets pushed way down as there is not sufficient room for the two-column format and the sidebar. With a 16:9 aspect ratio the result is nearly flawless. I had not thought to try adjusting the window size.
could be one of the ads putting in wrong code, or something with your javascript that determines pagelayout based on size.
I think your using some kind of existing content engine (based upon lookinig at the code), i couldnt determine which one, please checkout their forums too.
Personally i prefer a php approach (to get the client type) and make a table to fix things in, and no client side rescaling. Its faster to load for thin clients and a bit more to do for the webserver but its minimal.
Its perhaps old-school layout model, but the idea that i understand the inner core, gives me a better feeling then putting on joomla or drupal or whatever at least i understand the bits.
You should check what elements are using fixed values for the width (pixels, ems) and change them for percentages.
Hey guys, check out these screenshots. It could give you a better idea as to what is going on. https://t.co/BBNMSwg5u3
The behaviour is exactly as defined by the CSS, the problem can be boiled down to the following to entries in the css ( http://www.blendernation.com/wp-content/themes/smart-mag/style.css )
>>>>>>
.listing {
overflow: hidden;
}
>>>>>>
<<<<<<
.main-pagination {
overflow: hidden;
}
<<<<<<
(NOTE: the css is likely minified, making it hard to find these snippets)
mainly the .listing entry causes the 2 collumn view to dissappear (hide) in case the elements overflow and since these are just consecutive elements, they switch at the same time to a 1 collumn view, resulting in the large white area.
a fastfix would be to remove the string ".listing{overflow:hidden;}" from the named css as well as ".main-pagination{overflow:hidden;}" since then the pagination gets lost.
But one should rather think once again what the code was supposed to do, but since this is a stock wp theme, I doubt that this is reasonable. The best proposal would be to use a better theme with a more properly coded responsive design.
Also, it appears some folks had already submitted the site to browsershots, here’s the link to help:
http://browsershots.org/http://www.blendernation.com/
Re:
The whole overflow thing happens because of the ads widget, when the “Advertise here” block jumps to the next row, clogging the collumn view. As a longterm fix a rewrite/change of the advertising widget is the best option.
Yep it seems to be so.
An easy fix is to add ‘overflow:hidden’ to the .ads-widget rule. That should fix the blank page issue for smaller window sizes in firefox.
You can also sign up for a free SauceLabs account: https://saucelabs.com/signup
This will allow you to do 30 minutes of free manual testing per month, and 2 hours of automated testing per month (I think auto testing tests on EVERY browser, though).
I always use it in a pinch when I need to test on a specific configuration…
Hey,
As far as I understand at the moment: when the screen get’s to small, the advertisement becomes cramped. At some point (somewhere around a screen width of 1128px) the “advertise here” part of the ad jumps to the next line and that is when things go wrong. For some reason I don’t understand yet, the .listing that has been mentioned by others jumps to a width of 0 px. So, since it has an “overflow:hidden” command, it doesn’t show anything anymore.
The suggestion to remove this “overflow:hidden” seems to have the desired effect. But it will still show the “advertise here” on the left hand side, next to the first part contents of .listing.
Since I prefere to read BlenderNation content instead of the advertisement (which doesn’t seem to adjust to the screen), I would suggest to change the advertisement. If you add “overflow:hidden” to the .ads-widget, it would prevent the “advertise here” part to go to the next line and hence, it will not interfere with the remaining part of the webpage.
Alternative: you can also force the content to stay broad by adding “width:100%” to the .listing part (and then you don’t need the change the overflow.
Alternative 2: get the advertisement to show responsive design :)
The complete blank BlenderNation that person 3 and 4 talk about is something I can’t recreate. Perhapse you should contact them again after changing the advertisement.
I have problem with mobile chrome browser. It does not show the recent news at all. I recommend you to re install your wordpress theme, because it seems this is little broken and cannot get better.
A lot of these “bugs” are actually features. The content is getting dropped to the bottom of the page for table and mobile device sizes. This is called Adaptive or Responsive (I don’t differentiate) design. It really doesn’t work with side bars, And my best advice is to remove the scaling from your site all together. Adaptive/Responsive sites need to be designed with extreme care, the kind of care only a paid professional would be able to apply.
I have had a slightly different take on the Chrome problem.
For the last few days I hadn’t been able to see any content in Chrome, only the banner and sidebar. It would appear for a fraction of a second and then go blank. No content at the bottom either. The site was normal in IE thus I found this article.
Then I realised that I have been viewing other sites first at 150% size and then opening BlenderNation later (Normally BlenderNation is the first site I check when not working.) It only occurred to me to scale the window back down this morning, fixing the problem for me. The 150% view seems to carry over to new tabs under some circumstances and not others, making me not realise that it had broken the site for me.
Dear Sean,
I tried to do the same, but for me it worked, even at 150% and in Chrome. I tried to adjust the window, but this only resulted in the known bug I was talking about above and then it still shows the top picture and the menu, then a big empty gap and then the contents.
But it seems you’re talking about something different. I’m trying to recreate it, but can’t seem to manage. Does your consol (F12) show any error? If you rightclick on the blank screen and select ‘inspect element’ (the botom option in my version), what element do you get?
By the way, just for clarity: I’m not affiliated to BlenderNation. I am just a visitor trying to help.
Can confirm thats an issue with the ads-widget. actually responsive inside is buggy.
Also just noticed this beahiour und frontpage. and only if you scale down window width massively.
Just tried a little bit arround with Firebug. overflow: hidden; seams not enought. adding
max-width: 100%;
and as mentoined above
overflow: hidden;
to the ads-widget class seams to fix it for me. Maybe use !important.
Hi, i can confirm that .ads-widget {overflow: hidden;} seemed to fix the issue on firefox for me. The max-width change above did nothing for me, though.
Hey Bart, Thanks for all you do. I thought I’d give you some advice on the site.
The issue you’re having has to do with your AdSense ad. These do not work well with adaptive site layouts like yours because they have a fixed size which is breaking your layout. I don’t use them often in my own work but one solution could be looking into your AdSense settings. This blog offered some good advice I think: http://bloggingxone.com/google-adsense-ads-design-achieve-to-adaptive/
Your divs seem to be set up correctly but I don’t think this can be fixed just with css (unless you want to hide the ad on smaller screen sizes and lose revenue.) That said if you’re looking for an easy fix (albeit less then elegant) in your css find .ads-widget selector and add width: 751px; to it. That should keep the site from breaking at least. (I would also find your .sidebar selector and give it a margin-top: 125px; to avoid the ad from overlapping with other elements. Though this does shift your sidebar down permanently)
Beyond that you may just need to change your html a bit and move the ad to sit above your main content. Move the ads-widget and adblock-notice divs to right under in your html and add a little css to the .ads-widget selector (width: 751px; margin-left: auto; margin-right: auto; ) to make it look better. The ad still won’t scale but this would be a more stable solution. Hope that helps.
This is why I don’t have ads on either of my (insignificant) sites.
That said, I made my sites within my current capacity, so they are nothing special. I am not a CSS expert, so probably had no place replying here.
If I had the traffic of BlenderNation I might consider ads, but then end up not using them due to the inconvenience and annoyance that they cause. Adaptive and responsive design is still a relatively young aspect to the net and not all parties are keeping up. Plus, ads in your face are demonstrably getting old fast.
@ Blender Education, I don’t mean this in a bad way but I meant in my post that my problem was that I hadn’t noticed the zoom setting of the window. If you don’t have my exact setup used in the exact same wrong way, you probably can’t reproduce the problem I had, which wasn’t even a design problem for me – just good old human error.
I know, I understood that from your post. It was just that you described the same problem as mentioned in the last two usermails from Bart’s article. I was just hoping you would be able to provide a way of reacreating it so that I could try to fix it. But no problem. I’m glad that is is solved for you.
BlenderNation is a fantastic site and everyone should be able to properly read it. I can only hope that my own site (which is perhapse even more insignificant than yours at the moment) will one day match Bart’s achievement with BlenderNation.
Again (and I think I don’t say this often enough): Thank you Bart!
it’s not adsense. its a marketed banner. (dont know the correct term, but companys buy the space for a set time) as an aside, if it was adsense, they do have responsive ad widgets now. i use them on my site.
What makes you say that? I thought I saw the ads by google java file in there. I don’t have the time to dive back into it right now I was just wondering how you know? I know AdSense has some responsive ads (and looking into it was the first thing I suggested) but, I thought they only worked at fixed break points which would still cause problems with Burt’s adaptive layout. I’m not trying to get defensive, just trying to learn some new things.
Oh i’m sure he has adsense in the code, but the current banner is linked to buysellads.com which is a seperate platform for directly selling adverts and probably a lot more lucrative than adsense. you can check the details by inspecting the element, you’ll see its not adsense. he may need to go back to buysellads and see if they have a responsive template fix. As to the responsiveness of adsense, they actually work reasonably well. i use it in my side bar and it adjusts reasonably well, not 100% effective unless you refresh the page, where it will display a nicely.
You guys are both right – I was using BuySellAds to sell ad space directly, and used AdSense as ‘backfill’. BSA does not support responsive ads though, so I removed them again.
Hey guys, thanks for all the suggestions so far! As a first step, I have replaced the banner with a responsive version and I’ve removed some padding from the header graphic.
Could you test on your phone or tablet and let me know if this is any better?
As a next step I’d like to tighten up the layout on mobile devices to make it more efficient to read.