Does that mean that you now have FF installed?
maybe you are concentrating on the #right and not on the Content… #right works very well in all browsers.
The major problem now is that Content, like you mentioned earlier on gets cut off as you narrow the screen. In my FF that does not happen as you can see in my lst screenshot.
So, the question is: how can I get Content to adjust itself to a narrowing screen?
Yeah another user had an issue on here in FF so I decided to bite the bullet.
So wait you want it LESS responsive and less fluid?! That was my problem. I did not realize you wanted that. I’m not sure I agree in you going backwards but it’s your call.
On the Content media query then, just remove the width/max-width you have set (width:auto;max-width:600px;)
Do I? I want Content to adjust to the screen width. I thought that was called ressponsive
Anyway, I took out the width/max-width and Content is still being cut. (and it disappears momentarily at around 1000px.
Ryan
Please, look at the screen shots above. Look at the last one FF3.jpg. Note how the text under melia Benoa, wrapped itself into the available space and you are able to read everything. In the other browsers that gets cut off.
Chrome updated the Content width based on screen width.
Firefox did not. You say you want Firefox’s version. That is my confusion.
have you got some of that soda there? I need some myself!
Please, read my EDIT in the previous post. I think we are at cross purposes. What I see in Chrome still cuts the Content
Ok. Do a few things.
On your #box1/box4 1000px media query, remove the clear:both;
Then on Content, remove the top/position/clear rules you have set. Add in float:none; Add in width:auto;.
You are messing with the page it seems so please do my changes and report back.
Sorry… it doesn’t work
I BEG YOUR PARDON…
It seems to work at a later media query, so maybe it is just a matter of playing with the break points
It works only after 800px
Betweem 1000px and 800px the #box4 goes to the bottom; and the #right sidebar remains full (I want it to decrease as before)
I don’t know if you raed what I added above
My brain is too tired to try to work it out now, but there is one thing that worries me: the sidebar instead of getting narrower progressively, while the screen narrows, disppears all of a sudden.
Is it possibel to do it progressively with this code?
Thanks
Honestly this page is such a mess it’s hard to not tell you to redo it all.
I wish you would take a premade template. You are using floats which complicates things and to be honest you don’t really seem to have a firm grasp on things and how CSS works.
Not to mention you seem to have individual CSS files for each page. Different structures, heights on everything,
Responsive design is as simple as having a good structure and then only having to target the tablet/mobile view for minor changes if need be.
I see so many media queries in here, conflicting styles, it’s such a mess and it’s really stressing me out.
I normally dislike frameworks but I highly highly highly recommend you take a look at frameworks. This is not meant to be insulting but this would go along much smoother if you allowed yourself to work within a framework like Foundation.
Many fixes I find often are causing other issues in your page. Just because of the media queries and how many conflicting styles there are.
OP,
Please standardize all of yoru pages. Stop making custom stylesheets for each page.
One stylesheet. One HTML structure, one of everything please I can’t give you fixes for pages knowing that 40 other pages will have issues.
Paul, I might tap out soon my stress level is getting to me today. Another user is playing tug-of-war with me here.
Hi Paul, hi Ryan
I know and I agree with you both totally. However, this is 99% a hobby and I am rather keen to adapt what I have and worked on over the last two years.
earlier today I thoght I had sorted out the most omprtant part, only to find that it only works in FF. Now Ryan’s come up with a solution that only needs confirmation that the sidebar can work as I has it previously, disppearing progressively. If that is possible with this code then I can sort out the break points to get flowing smoothly.
You have some sticking points that make this almost impossible for your current design.
First of all let me ask you a question:
“What do you think will happen to the content if we make the middle and right sections fluid in width”? What influence will that have on the layout?
Thinking time…
…
…
…
…
…
…
Answer:
If the content is now fluid then it will span a greater height to accommodate its content and all your height measurements on the columns will be incorrect and content will overflow the heights. You can’t change the height because it will change at every pixel that the screen is open or closed.
This also means your absolute column won’t work because you cannot put a footer underneath it any more because it height will be variable.
I’ve already given you a three column template that avoids all these issues and you should really be aiming for something like that.
The best you can do for this layout is to do somethng like this:
#left, #right {
height:auto;
min-height:2720px;
}
#content #box4 {
height:auto;
min-height:2460px;
}
#content {
float:none;
width:auto;
overflow:hidden;
}
@media screen and (max-width:1000px) {
.panel1, .panel2, .panel3, .panel2right {
display:block;
}
}
That code goes after your original in bali1.php assuming you haven’t changed it since last time.
Hi Paul
many thanks for coming back and my apologies for the interminable threads that attest to my inexperience and my stubbornness.
It’s a bit late for me and will leave the changes until tomorrow morning on afresh head. When you refer to my [quote=“PaulOB, post:54, topic:115024”]
original in bali1.php assuming you haven’t changed it since last time.;
[/quote]
there have been so many changes… The latest that I am happy with and works very well in FF is now in http://pintotours.net/Work/TEST3/bali.php
I am aware of the problems with the bottom of thee file and was leaving that for later. In fcat, I had already made changes to the central section and decided to get rid of the footer. But that is not my main concern now.
All I need now is to get all browsers to display the page like FF, i.e. letting Content adjust to the narrowing screen. If that is impossible, then find a solution, like Ryan’s that includes a progressively disppearin right sidebar, like you can see in the link above.
PS Incidentally, I do not want the panels in the right sidebar any longer.
In case I’m not making much sense… ideally what I need is to make http://pintotours.net/Work/TEST3/bali.php behave exactly as it is in all browsers
It’s not working in any browser at the moment as you have a massive horizontal scrollbar that will just kill mobile devices as they will need to accommodate the scrollbar and thus the layout will be all over the place.
You need to work on the principles I gave above but as you have changed the design again you now need to add this revised code.
#left, #right {
height:auto;
min-height:2720px;
}
#content #box4 {
height:auto;
min-height:2460px;
}
#content {
float:none;
width:auto;
overflow:hidden;
max-width:none;
position:static!important;
margin:0;
clear:none!important;
}
@media screen and (max-width:1000px) {
.panel1, .panel2, .panel3, .panel2right {
display:block;
}
}
Put that code after your original css and then test to see the result.This will be about the best you can hope for with that design. You can of course hide columns earlier rather than later but the general approach must be followed.
I must re-iterate that if at any time the browser windows shows a horizontal scrollbar then it is game over as far as responsive design is concerned. Your task is to make your content always fit in the width of the browser. If it doesn’t fit and a scrollbar is triggered then a smaller device must accommodate that scrollbar width. It will treat the layout as being that wide to start with and you will end up with content squashed to the side.
Good morning Paul
Last night my brain had ground to a halt, but now I am fresh and alert, but… still confused!
You write about a horizontal scrollbar but I do not see it in any of the major browsers or even in a mobile. Are we talking about the same file? http://pintotours.net/Work/TEST3/bali.php
Let me also add that this file is the one I arrived at as acceptable before I realized it only worked (and still does) in FireFox. Again you say that it does not, which makes me wonder if there is some peculiarity in my computer.
Now, before I mess up things even more, the code you sent me is above
@media screen and (max-width:1000px) {
.panel1, .panel2, .panel3, .panel2right {
display:block;
}
Does that mean that I am supposed to change the main code, and NOT the queries?
Please, note also that the .panels are no longer required. I want them to vanish as the #right starts being squashed.
LATER
I’ve just realized that there was serious mistake in the code caused by careless changes… as such
{
background-color:#594c26;
height:auto;
float: left;
padding: 10px;
width: 60#content0px;
}
I’ve corrected it. Could you have a look at the page now, before I make further changes?
LATER STILL
I’ve added your code for Content to the main part of the css but it leaves the right sidebar at full width until it disappears, and that is not what I’m trying to do. I want to behave as it does in FF (if it’s possible, of course). I can’t see why it works in one browser and not the others. Thre must be a way of forcing the other browsers to follow.
Thre is also a problem in Safari with this code,which creates a second ghost right sidebar.
before I get even more confused…
The original file that works as I want it, but at the moment, only in FF is here
http://pintotours.net/Work/MYTEST/bali.php
the same file but with amendments in Content, in accordance with your latest post (I have not changed the bits regarding height as they can waituntil the question of Content is resolved)
Hi
I think I found a way to solve the problem. It is already working in http://pintotours.net/Work/MYTEST/bali.php although I now have other “little” problems I have to think about.
Please, forget about all the above. I will return if I can’t find my own answers.
many thanks
This is a bit like trying to hit a moving target as you keep changing things and not implementing the code I give you correctly.
You need to stop with your current approach as it won’t work.
Look at the screenshot of your page.
It’s completely broken in all browsers that exist.
Now if you look at a screenshot of the page with my code added correctly you can see no such problem.
Your code has changed again so if you want to add my code you will need the following code:
#left, #right {
height:auto;
min-height:2720px;
}
#content #box4 {
height:auto;
min-height:2460px;
width:auto;
max-width:none;
}
#content #box1 {
width:auto;
max-width:none;
}
#content {
float:none;
width:auto;
overflow:hidden;
max-width:none;
position:static!important;
margin:0;
clear:none!important;
}
@media screen and (max-width:1000px) {
.panel1, .panel2, .panel3, .panel2right {
display:block;
}
#right {
display:none
}
}
Add that to your page and it will work. Add the code after the original CSS. Do not mix it in or change anything that I give you.