Hi
I’m having trouble sorting out the 2-column text in this page http://pintotours.net/AAA/VVV.html
I get one result with most browsers, another with the Responsive Design View of FF.
In any case, from the moment the page goes beyond @800 and until the 2-column goes vertical into a single one, @550, I am sure things could be improved…
There is also a dot that appears at the beginning of the expanded text, which I would like to get rid of and do not know how…
Thanks
Hi there qim,
I am rubbish @ responsive but jolly good @ dot eradication.
.list ul {
list-style-type:none;
}coothead
That, I don’t believe!
Many thanks, Dot’s gone.
I hope someone else will take up the text problem, which may be in my machine only…
LATER
For instance, just before the 2 columns go vertical at just over @550 I cannot see how I can control the paddings/margins left and right. At the moment the columns are totally different
My main problems are with the #artright expanded when the page loses the #left sidebar, and with both #artleft and "artright when the columns go vertical.
I am sure I had this last one sorted out but I have ben making millions of changes to try to get to work, that I mus have messed it up again.
I guess it might have to do with .wideR but no matter what I do, nothing solves the problem.
I’m going to leave it alone and hope for some charitable soul to come along…
Maybe I’m slow today but can you help a lazy reader out and post pictures and point at what is happening and what you want to happen. 
Hi
If you narrow the page to just before the two bottom text columns go from parallel to vertical you can see that the left has a certain left-margin while the right has no margin at all.
Even though I coded this part myself I am at a loss on how to control the margins /paddings in this area…
That helps. So there is a lot going on. Honestly I think the HTML structure can be done cleaner. See how I would approach this in the screenshot below. But, if you want to plow through what you have here’s a few starters:
.list ul{list-style-type:none; margin:0;} This will help with the margin on the left.
#artleft p{padding:0 20px 10px} The <p> adds more padding on the left within a <ul> that already has padding on the left
Also you probably want to look into your .wideR column as well.
But the biggest issue I think is your HTML structure for the hidden content. I see that you are forcing the width but a cleaner way would be something like this:
Hope that makes sense.
Hi, many thanks
I assume that you are asking me to make those changes in the media queries @550, right? I di, and there is no difference
The full-width page works well.
Yes, I know the code is a mess. i am trying to marry two different pages togather and the clean-up will happen soon when I get these problems out of the way.
As for your suggestion, I would very much like to understand what you have in mind. I’m afraid my knowledge opf these thibngs is very limites…
LATER
I see what you mean with putting the expanded content inside different divs, but I don’t know how I could do that with the current show/hide code…
Hi
No takers?
I’m still stuck and would like to see if I can sort out the paddings/margins of the expanded text on the media queries.
Thanks
LATER
If it is not possible to sort out the problem in this file, I have an alternative, which seems better, but here for a start the right of the text gets cut from around @845 to @820 and again from @620 to @550 I cannot see why?
My basic problem is that I stll can’t work out how to control text magins in the media quesries…
http://pintotours.net/BBB/VVV.html
Could you help there, please?
Thank you
As far as I can see you just need this.
.wideR,.wideL{
max-width:none;
margin:20px 0;
padding:40px 0;
}
The above is over-rides and should follow after all your media queries.
Hi many thanks Paul
Yes, that solved it,
Thre are still a couple of points:
when you press the button “Read more” of the Left text, the button “Read more” of the right text travels down to the bottom rather that staying put.
Then, when the texts go vertical at @600 the “Do not disturb my bags” text goes over the footer and does not expand.
This last one I have not looked at it properly (I’m just being lazy…); the first I acnnot work out.
many thanks for your help
LATER
Second problem SOLVED
Still stuck on the positioning of the links Read more" particularly at below @600Host, and… the text of wideR is going off the right and there is no way of controlling it (that I found out…)
help…
You have 370px left padding on #hide3 and show3 (and 300px in the media query) which means that at smaller widths that line is too wide. You need to remove the padding and maybe float the right element to the right instead.
I think your image at the bottom is also too wide.
Try something like:
.wideR p,.wideL p{width:auto}
img.textcenter{
max-width:90%;
margin:auto;
display:block;
padding:20px 0 10px;
}
@media screen and (max-width: 550px)
.wideR p{width:auto}
}
That’s more of an html issue because you have the read-more link after the expanded content which means it will always get pushed down. You should have those read-more links at the end of each column instead but you would then need to target the hide and show with some js.
Hi, many thanks Paul
The image got sorted out but the #artright text is still getting out on the right under @450 (I think)
I am not sure what you meant by > float the right element to the right
I did this but it did not do anything, so I took it out again. Is this what you meant?
#artright p{
float:right;
padding:0 20px 0 20px;
font-size:18px;
text-align:justify;
}
Now, read-more links. As they are they are unacceptable, I think. In the other version they behaved properly, but I thought this way might be easier… It’s a nightmare!
Did you have a look at the earlier alternative? conradical suggested this structure and I went along with him, but if the links can’t be sorted out is there a way of getting the other test page to work? It’s still at http://pintotours.net/AAA/VVV.html
The main issue there is the paddings in the extended text which maybe needs the same cure that you gave to this other page
Two steps forward, one backwards (or maybe three!)
I’d just opened the bottle of bubbly to celebrate my unusual success in getting the margins working in the expanded text, when I decided to try FF Responsive Design View and the expanded text is all over the place. It seems to work fine in Chrome and IE9, so I don’t know which to believe
In any case, if FF’s RDV is to be discounted I still have problems with the expanded text when the two columns go vertical towards the end.
http://pintotours.net/AAA/VVV.html
So, if you could help me here and tell me not to believe FF, it will have been a profitable day.
The problem is mainly when you expand the #artright in the queries
Thanks
Latest version still with problems in the margins/paddings of the extended texts in the queries, especially with #artright
http://pintotours.net/CCC/VVV.html
Thanks
Well, I’ve managed to get something nearly acceptable that can be bettered by adding more and more break-points!
Surely, there is a more elegant and better way of doing this.
help…
.wideR{
margin-left:-50px; (must be changed when the #left sidebar disappears)
max-width:430px; (this is what has to be changed gradually and constantly!)
width:auto;
}
Is there a better way to substitute the max-width so that only a couple of break-points are needed: ime with the #left; one without?
I gave you the answer in my other post and you need to move the right collapsing section out of that right column and into the main section that spans the whole width so that it expands automatically to full width and will need no more break points or negative margins.
You just need the link in the right column and then add some js to toggle the divs on and off rather than using the check-box hack because that won’t work unless the elements are general siblings.
You could make it work by putting the expand links in the main section also but you would need to float them left and right respectively. Of course this means the link won’t be at the end of the respective content if the columns are different sizes.
To be honest those two small columns side by side would be better off as full width columns anyway and avoid all the issues you are seeing. It makes little sense to toggle the side column and then let it go full width. It just looks very awkward to me.
Usually when something is hard to get right then that’s usually because it’s wrong 
That’s why I shied away from that version. I know even less about js than I do of css/html! One of the reasons I am changing the current page is because the expanding text is based on js and the accompanying css/html is diabilical for me to understand.
Are you referring to the latest test page? I have a little script in one of my other pages, e.g http://pintotours.net/Asia/Indonesia/GranMeliaJakarta.html which has an anchor accessed from another place in the page. I wonder if that would help.
I agree! And that’s probably the way I will be going. But,once I get something in my mind… Stuuborn, I think s the operative word!
many thanks
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.