Using Vivaldi for the pages as they are currently, the “non-dev” has a horizontal scrollbar while the “dev” does not. But neither looks to be responsive in a good way.
“non-dev”
“dev”
Using Vivaldi for the pages as they are currently, the “non-dev” has a horizontal scrollbar while the “dev” does not. But neither looks to be responsive in a good way.
“non-dev”
“dev”
I just put dev in live. Yes, Vivaldi is my preferred desktop browser as well. On my Win 7 desktop with Vivaldi, I can drag to resize the window from about 350px wide to about 1000 and it resizes nicely. Above 1040px wide and the ad container centers and remain 1000px wide. I just tested all the way to 1920px wide.
What OS and what window size are you using?
I have a plugin for Firefox that sits in the status bar and tells me the window size. I wish I had one for Vivaldi
The operating system is Windows XPP. The window size is as shown. That is a 100% screen shot of the browser window. Click it and it enlarges to the full rez. The version of FF is 49.0.1
You can see the CSS that is being applied in the right Firebug pane.
I have Windows 10 with a resolution of 1600 wide.
In my screencast gifs, the viewport width was around half that.
It is common practice for a new designer (and new developers too) to work up a design (script) in their own set-up until it looks and works like they want it to.
A problem is once it gets on the web it is unlikely that other users will have their set-up the exact same way.
Testing with different browsers is a good idea, but IMHO the best thing to do is make sure everything is valid.
As posted previously, relying on browsers to “fix” things is not a good idea.
Some may see an extraneous tag and ignore it, some might remove it from the DOM, others may add a matching tag where they think it should be.
For an analogy, this sentence:
“You am excited about that.”
could be “fixed” to
“You are excited about that.”
or
“I am excited about that”
Browsers do a good job at doing what they are told exactly to do, but they may not “guess” what was meant when it’s unclear.
I can understand the desire to “not do all that now, only this one thing first and then the rest later”, but “building a house on the sand” has been a poor thing to do for a long time.
I did not say that unclosed tags amounted to poorly chosen code. I said that they, along with other examples, amounted to “casually applied code”. Any time you leave choices up to the discretion of the browser, you open your code to the possibility of misinterpretation.
Vivaldi on win 7 with a window size and a container size of 1170 lays out fine. But that layout on your screen is not acceptable. None of my testers have reported that problem. I used this method to display the ad choices because I couldn’t get bootstap responsive images to work in a flex container. Do you have a suggestion? Odd, no phone, tablet, Mac or PC I’ve tested on has laid out like your screen shot.
What does that mean? What are you saying? What do you want to do about it, if anything?
I tried a Win7 box with FF installed and I see the same issue.
In post #7, @TechnoBear said:
OK, there is a problem on Linux desktops. I’ll try to fix that on my ubuntu box. Is anyone seeing any issues on a PC, a Mac, a tablet or their phone?
Is Ronpat seeing an issue on a Windows desktop with Firefox? I’ve tried several Win 7 and Win 10 desktops with FF and they look good. Is it a res issue?
Anyone know how to do responsive images with flex?
Yes, I still see the problem. Using Firefox, I also do not see the long middle part of the page with the ads. With Chrome, I do see the ads.
If it helps you narrow down the cause, be aware that the issue is browser window width sensitive. When the window is 990px wide, the menu images within .container appear in a normal position within the page and there is no horizontal scrollbar. At widths wider than 990px, .container becomes incrementally wider faster than the breakpoints shown in Firebug thus .container overflows the browser window and sprouts the horizontal scrollbar.
The screens are full rez.
Probably unrelated, but…
May I ask why you prefer to use flex for the images instead of ordinary block boxes and the CSS that SamA74 showed?
Flex is math intensive and a lot of flex can significantly slow the responsiveness of a browser. You may not be overdoing it; I can’t tell yet. But I would like to hear your pros and cons regarding flex vs block boxes.
Thanks ronpat:
You should never see a scroll bar. The page isn’t resizing to fit the window width as it should. The only thing fixed on the page is each ad’s picture width. .txtcol should shrink and grow.
At window widths below 780 the (max-width: 780px) media query should make each 100% of window width. And it does on every box I’ve tested. Actually, at widths under about 360px you may get a horizontal scroll bar as the picture won’t quite fit.
I can drag/resize the browser window all I want in any of the browsers and the page works correctly. Why is your browser different? If I check Vivaldi’s or Firefox’s dev tools I see the break points getting hit and I can watch the images scaling down to remain onscreen. It looks like Bootstrap isn’t working on your machine. Did it load? I should be checking if jquery and bootstrap load from cdn and if they don’t load local, but I just realized I removed that code from dev and didn’t put it back.
Any idea why the page isn’t scaling for you? And, more importantly why /how you didn’t get any content in ? Even if I increase text size to 150% when at high resolution it still works in FF on both boxes I have here. But, you are right as others are reporting that they see nothing. I’m pretty sure at least one is a adblock issue as he says he sees the ads for a second and then they go away. I’m perplexed why all the boxes I test on display correctly but yours and others don’t. I’ll do more testing on .container
If you disable className .container
in the HTML, the menu images will fit within the page correctly at all widths and no horizontal scrollbar will be triggered. THAT is the element that is triggering the scrollbar by overflowing the page. In Bootstrap, .container
is assigned fixed widths as shown in my screenshots.
Also, I see the images scale smaller within the narrowest range of widths and no scrollbar is triggered. That’s true whether or not .container
is disabled.
I DO have AdBlock installed.
Just disabled it.
The problem with the display of the classifieds AND the menu images is indeed caused by AdBlock.
Since your site is the place to be for ads about vintage autos, the next challenge will be to find out if there is some way of coding your site so it doesn’t antagonize AdBlock.
Is there any way around the issue with Bootstrap? FF isn’t giving me scrollbars ever, but Vivaldi, Chrome and Safari are on Win 7
Like the pictures? I wonder if there is any way to detect adbloc? I had this issue before when I stored the photos in a folder called ads. I renamed the folder class and everyone could see the pictures. Now the problem is back. I wonder what’s causing it this time.
Thanks to both of you for the help and education; we are close. Any other suggestions or ideas for improvement so everyone can enjoy the Classifieds? Maybe I’ll redo adbuttons (.container) in flex. However, as you said flex is resource intensive. I couldn’t get Bootstrap to scale the textcol column properly on viewport changes. Does Bootstrap not adjust to viewport size changes and dynamically resize divs? I know it will move the div/col but it doesn’t seem to resize it for me if U put the ads in containers…
THANK YOU
I do not see a horizontal scrollbar at desktop widths on FF or Chrome in WinXP.
Yes, adBlock can be detected (I don’t know how it’s done). If AdBlock is detected, one can open a popup and advise the user to turn offAdBlock to view the site but it cannot be defeated.
Possibly something that you added?
You can try to comment out everything new and then restore it incrementally until the ad blocker is triggered. That’s what I would do.
Flex is excellent for certain types of layouts that would be difficult to achieve without it, but using flex for an entire page layout would be overkill and probably more difficult than using conventional methods. It’s like animations, in moderation it’s great, but if overdone… not so great.
One of bootstrap’s strengths is supposed to be it’s built-in responsiveness. I haven’t read the manual. You said that you have.
Do you remember that the className .container is a reserved Bootstrap class?
I found some code to detect adblock and I now display instructions on adding HCCA.org to the Whitelist. I’ll work on contacting adblock to about getting delisted.
I made the changes and put the new Classifieds in live as well as dev. I also renamed my ad.css style to class.css in hopes that might get the page past adblock. That change didn’t do it.
For some reason my ol and ul styles are not being applied at least in Chrome. Any idea why? Vivaldi and FF display ul but not ol. Do you see any other issues. =Are you still having the problem with the ad choices nav buttons? (had to take time off from helping the Club for torn bicep surgery … apparently my athletic prowess equates to my css prowess)
OL & UL were a Bootstrap issue I think. With more specificity I was able to get both tags working. Does anyone see any remaining issues? Is the Ad Choices nav still a mess on anyone’s computer? It displays correctly on all computers I’ve tested on.
Again, thanks for the help with this!
I found code to detected adblock and wrote some JS to use this “trick” to instruct the visitor to ad HCCA.org to their whitelist if adblock is detected blocking the display. Seems to work well on the 2 Win 7 PCs I’ve tried running Chrome with adblock. How does it work for you w/ adblock running? I wish I knew what I added that tripped it. I tried not displaying sections to get to a spot that works, but without success. My guess is adblock got “updated”
Yes, .container is reserved and I am using it per the spec as part of the Bootstrap nav for the ad choices. Are you still having display issues with this section?
Maybe flex is overkill and more difficult, but it works and I couldn’t get BootStrap to dynamically resize the divs. Yes, it would break them to a new line. The main reason I stayed with flex is that you said the BootStap ad choice nav bar doesn’t lay out right for you and I can’t replicate the problem and fix it. I’ll keep working on a Bootstrap solution ad if I get it to work run some comparison tests. Keep the suggestion/critique coming; thanks.
I put the new page in live: http://hcca.org/classifieds.php?cars
The buttons are working correctly now in FF… staying within the boundaries of the page and not triggering a scrollbar even if AdBlock is enabled. The “Discussion Forum” button in the top right corner of the page was too far to the right. It looks perfect now. Overall, the layout looks better.
Am not sure if the ads are being displayed when AdBlock allows your site. They weren’t an hour ago, then I diddled with AdBlock, now they are visible when your site is allowed. Dunno if I weakened an AdBlock filter or what happened.
Thanks. Did you see the message about AdBlock “blocking” the ads and the instructions about white listing HCCA.org?
Glad the BootStrap ad choice buttons are formatting correctly.
Things were always working correctly for me in FF; it was Chrome giving me grief. Chrome is working well for me now. Now, Safari on the PC isn’t laying out well; I’ll test on a Mac tomorrow.
You are right, BootStrap appears to want to do everything and format everything to its liking. Makes it a bit more challenging to lay things out to my liking. But, with both your help we came a long way; hope Club members enjoy the changes. Can either of you think of any other improvements?
My guess is that you white listed hcca.org and didn’t effect AdBlock otherwise.
Safari on the PC has not been supported by Apple since 2012 or earlier. You really shouldn’t worry about Safari on the PC.
I still have to “allow” hcca.org to see the ads, but a couple of hours ago I couldn’t do that. Whatever I did to AdBlock unintentionally allows me to see the ads now. I wonder if AdBlock would revert to its default parameters if I reinstall it? otherwise, I’m not confident that my observation is useful.
Glad things are coming together for you.