Line Breaks

Support
#1

hi

I have a multi line address in my footer and it has been setup with <span> tags for each line and then display: block; or display: inline-block; used to adjust the lines through various media queries. It has been working fine for quite some time, but when I was making some adjustments, it now appears to display incorrectly.

I am finding some small quirks with doing it this way, as at the moment, I cannot get one line to break when I want and another produces quite a sizeable gap between one line and the next.

Is this the preferred way to handle something like this, or is a better way to use the <br> tag, giving it a class and then using media queries to have them either display or not? So it would be like <br class="address4"> for instance…then using the media query to make it display or not.

The url is feastthailand.com and the two address lines of concern are the phone number .address4, which will not sit where I want it (next to the line above) and the gap between the bold PRIVACY POLICY TERMS & CONDITIONS (.address6) and the next line of WAIVER & RELEASE OF LIABILITY (.address7) From 768px .address7 drops below .address6 but there is line of space then between the two lines.

Any suggestions of a correct way to achieve this, either using span or another preferred method like the <br> one above?

cheers

#2

Hello There,

Thank you for the very detailed post information. Before we give any suggestion, you will need to update your html content first. I have a hunch that this is just an issue caused by incorrect quotes in one of the class in the span tag.

Please make use of this code:


<span class="address">FEAST THAILAND</span>
<span class="address1">10 NAEBKHEHART ROAD HUA HIN</span>
<span class="address2">(Inside The Memory Hua Hin) </span>
<span class="address3">PRACHUAP KHIRI KHAN, 77110 THAILAND</span>
<span class="address4">+66 (0) 32 510 207</span>
<span class="address5">OPERATED BY FOOD DISCOVERY (THAILAND) CO., LTD.</span>
<span class="address6"><a href="http://feastthailand.com/privacy-policy/"><strong>PRIVACY POLICY</strong></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://feastthailand.com/terms-conditions/"><strong>TERMS &amp; CONDITIONS</strong></a></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="address7"><a href="http://feastthailand.com/waiver-release-liability/"><strong>WAIVER &amp; RELEASE OF LIABILITY</strong></a></span>
<span class="address8">
<strong>©2017</strong> ALL RIGHTS RESERVED</span>
<span class="address9">TAT License No. 14/02344</span>

Please let us know how it goes.

#3

hi Rue

Thanks so much for your reply.

Yes, I see now that a few quote marks were not correct and have corrected that. I also noticed that I had used &#160; rather than &nbsp; to put some space between .address7 and .address8. This is what had caused the line of space between the two when they moved to display: block; at 768px.

The basic layout should be like this:
.address .address1 .address2
.address3 .address4
.address5 .address6
.address7 .address8
.address9
.address10

At 768px, .address8 drops below .address7 - this works fine with a media query changing 7 from inline-block to block

768px
.address
.address1 .address2
.address3 .address4
.address5 .address6
.address7
.address8
.address9
.address10

It is at 414px that the problems arise. I have a media query to make .address2 drops to its own line as does .address4 and again, this is fine.

414px
.address
.address1
.address2
.address3
.address4
.address5 .address6
.address7
.address8
.address9
.address10

The issue is that the only way to get address.3 and .address4 onto their own line was to use any of <br> or </br> but they both put a line of space, but only at at 414px.

You see, if I did not put in the break, then .address3 and .address4, being inline-blocks, would sit alongside the lines above, as they are also inline-block. If I made .address3 block, then I could not put .address4 next to it

Is it at all possible to give the <br> or </br> a class and control the space using CSS? I have read about doing that, but have not been able to get it to work.

As an example, I tried using either <br class="footer-break"/> or <br class="footer-break"> and then have a media query make it display: none; at 414px, but the blank line still remains

Any suggestions, as this is the only thing causing grief to this area and it is doing my head in? I simply want to be able to put .address3 & .address4 on their own line with no line breaks above or below and then have .address4 drop to its own line with a media query at 414px.

url is feastthailand.com and it is the footer

regards

#4

Hi There,

In this case, visibility can be use. Combine address3 and address 4 and make it only visible on this screensize. Below address 4 add something like this:

<span class="address3-4">PRACHUAP KHIRI KHAN, 77110 THAILAND +66 (0) 32 510 207</span>

To show it only on specific screen size use this:

.address3-4{
  display:none;
}
@media (max-width:414px) {
.address3-4{
  display:block;
}
.address3,
.address4{ /*Hide default address 3 and 4 because it will be replace by combine address3-4*/
  display: none;
}
}

Hope this helps.

#5

hi Lely

Thanks so much for your reply

OK, so any time I need to have a particular look like this, instead of bashing my head against a wall trying to manipulate each element using inline-block or block, just make a completely new line and only have it display at certain sizes.

It’s such an obvious way to do it, but just couldn’t get my head around it.

Thanks so much. I will amend it now

regards

#6

On behalf of my colleague, you’e welcome. Cheers!

#7

hi Paul

For some reason there is a hitch and 2 of the address lines simply will not display.

Here is the html:

<span class="address">FEAST THAILAND</span> <span class="address1">10 NAEBKHEHART ROAD HUA HIN</span> <span class="address2">(Inside The Memory Hua Hin) </span> <span class="address3">PRACHUAP KHIRI KHAN, 77110 THAILAND +66 (0) 32 510 207</span> <span class="address4">PRACHUAP KHIRI KHAN, 77110 THAILAND</span> <span class="address5">+66 (0) 32 510 207</span> <span class="address6">OPERATED BY FOOD DISCOVERY (THAILAND) CO., LTD.</span> <span class="address7">OPERATED BY</span> <span class="address8">FOOD DISCOVERY (THAILAND) CO., LTD.</span> <span class="address9"><a href="http://feastthailand.com/privacy-policy/"><strong>PRIVACY POLICY</strong> </a><a href="http://feastthailand.com/terms-conditions/"><strong>TERMS & CONDITIONS</strong></a><a href="http://feastthailand.com/waiver-release-liability/"><strong>WAIVER & RELEASE OF LIABILITY</strong></a></span> <span class="address10"><a href="http://feastthailand.com/privacy-policy/"><strong>PRIVACY POLICY</strong> </a><a href="http://feastthailand.com/terms-conditions/"><strong>TERMS & CONDITIONS</strong></a></span> <span class="address11"><a href="http://feastthailand.com/waiver-release-liability/"><strong>WAIVER & RELEASE OF LIABILITY</strong></a></span> <span class="address12"><strong>©2017</strong> ALL RIGHTS RESERVED</span> <span class="address13">TAT License No. 14/02344</span>

And here is the CSS associated with it:

.address, .address1, .address2 { font-size: 11px; font-weight: normal; font-family: Lato, sans-serif; letter-spacing: 1.5px; text-align: center; display: inline-block; color: #000000; } .address3, .address6, .address9, .address12, .address13 { font-size: 11px; font-weight: normal; font-family: Lato, sans-serif; letter-spacing: 1.5px; text-align: center; display: block; color: #000000; } .address4, .address5, .address7, .address8, .address10, .address11 { display: none; }

For some reason .address 3 and .address9 simply will not display, yet both should be set to block

Any suggestions here? I have checked and replaced all the quotes just in case, so what could be restricting just those 2 from displaying?

Regards

#8

Hello There,

Thank you for the clarifications. I have investigated the page and I found this css:

.address3, .address7, .address8, .address9 {
    display: none;
}

This is the reason why address 3 and address 9 is not displaying. Please find this block and remove it. This should resolve it.

#9

hi Rue

Thanks so much for your reply

I see what it was. The close bracket of the 414px media query is in the wrong place, as that block is meant to be under the media query at 414px and should only be affecting that screen sizes.

Well spotted…I didn’t remove that block of code, but rather fixed the bracket correctly. Now it is fine.

Sometimes it is staring you in the face and no matter how long you stare at it, you cannot see it

Thanks so much

Regards

#10

Glad we could help.

Cheers!