Hi
I’m redoing a page using some code from the old one, but I’m stuck on the box/link: “Details – Hotel Website --Rates”
I don’t understand where I can control the width and in particular align it center with the text above and remaining responsive.
Besides, I get totally different results in FF and Chrome…
I put a test page here http://pintotours.net/TEMP1/FFF.html
help…
It seems to be breaking awkwardly on a narrow screen with that border. That’s because the border is applied to the a element which is an in-line element.
try changing the display for .look-inside2 to display:inline-block
It may also benefit from a little padding on the sides.
Hi thanks Sam
I’ve also added a couple of lines and it’s behaving better,
margin-left:300px;
color:red;
except when you get to a narrow screen. I would like the link to stay in one line below the text above that wraps around the image.
How can i do that? EDIT Well, of course, delete the margin-left in the queries.
Any other ideas to get this to work better?
Thanks
No, please stop using these “magic numbers” in your css, they are the root of all your woes in RWD.
Using big, fixed margins will never be responsive.
If you want it to be centered, apply a class to the containing p element with text-align:center
<p class="cent">
<a class="look-inside2" href="ParaPalma.html"><span>Details -- Hotel website -- Rates</span></a>
</p>
.cent {text-align:center}
Hi thanks
I’m off for a very badly needed hair.cut…
Will sort it out in one hour.
Thanks
EDIT
Tries it quickly but it still does not do what I wanted
If I understand you correctly, you want that link to be centred relative to the text in the paragraph above, irrespective of the width of that paragraph?
In that case, I’d have thought the easiest way to do it would be to wrap both paragraphs in a div, and then use text-align:center on the paragraph containing the link, as @SamA74 suggested.
The ‘text-align: center’, should be working fine:
Perhaps there’s something else you need to remove? (I took out that insane margin-left: 300px property in the process).
That’s centring the link in the page; @qim says he wants it centred below the text.
Ahhhh, my bad. Then yes - your solution sounds best.
I’m going to walk away now. 
Don’t do that! I’m going out now, and qim might need more assistance when he gets back.
Sorry, as usual, I confused you all!
I want the link to be centered below the text at full width.
however, when the screen narrows the text wraps round the image; then, I want it to remain centered below the text, which means being centered to the full width of the column.
EDIT
The main reason for this is that the link breaks into 2 lines as the screen narrows, when there is still a lot of room on the left. I suggested earlier to use a query to get rid of the margin-left, but Sam disagreed, so I’m not sure what to do now.
No - @SamA74 disagreed with you having a “magic number” margin there in the first place. (As do I.)
Did you try my suggestion?
I think so, but got stuck because the text is justified and link should be centered. The problem starts when you start narrowing the screen.
What is a “magic number”?
It is the devil 
*
I actually posted a link about it when I first mentioned it.
You should read that.
* as far as css and RWD is concerned.
Sorry, yes I read it now.
Well, I cannot see any other way, other than padding-left with precentages and a series of queries…
A proper sectional structure to the page is the key.
If you need the two elements to be confined by the same space, they should share a common container to create that space in which to position them.
This is exactly what @TechnoBear was suggesting by putting them both in a div.
Hi Sam
But will the text wrap round the bottom of the image as the screen shrinks?
Not as I’ve drawn it. But I thought that is what you were requesting, for the centre to be the centre of the space between the picture and the right side.
If not then use my original suggestion of aligning within the full width, you can’t have it both ways.
I’ve tried that over and over again with margin:0 auto: text-align:center; and it does not work!
Right now it’s with margin 0 auto;;
It works when I try it in Inspect, what can I say?
