Span Line Break Issues - html

Question

I have a multi-line address in my footer and need lines to break at certain screen widths.
I have each line set in a <span> tag with a class and then allocated either block or inline-block in CSS.
For some reason a couple of lines are no longer behaving as they should and I cannot work out why.
Regardless of what I set a particular line to, it always appears in a line on its own, which is not what I want. And another 2 lines break when they should, 768px, but a gap between the lines appears.
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</span>
<span class=“address4”>[phone]</span>
<span class="address5">OPERATED BY FOOD DISCOVERY (THAILAND) CO., LTD.</span>
<span class="address6"><strong>PRIVACY POLICY</strong>    <strong>TERMS & CONDITIONS</strong></span>    <span class="address7"><strong>WAIVER & RELEASE OF LIABILITY</strong></span>
<span class="address8"><strong>©2017</strong> ALL RIGHTS RESERVED</span>
<span class="address9">TAT License No. 14/02344</span>
CSS
.address,
.address1,
.address2,
.address4,
.address6,
.address7 {
font-size: 11px;
font-weight: normal;
font-family: Lato, sans-serif;
letter-spacing: 1.5px;
text-align: center;
display: inline-block;
color: #000000;
}
.address3,
.address5,
.address8,
.address9 {
font-size: 11px;
font-weight: normal;
font-family: Lato, sans-serif;
letter-spacing: 1.5px;
text-align: center;
display: block;
color: #000000;
}
Obviously that's just the standard CSS without the media query, but .address4, which has display: inline-block; should be sitting alongside .address3, which has display: block; Any suggestions why it is not?
When the media query comes into play at 768px, .address7 drops down below .address6, which is what I want, but a line of space appears between the 2. Again, any ideas why?
Is this the best way to handle breaking lines where required, or is there a better way? I have even tried using with a class added as well as trying another method found here:
CSS
#media only screen and (max-width: 414px){
.address2 {
font-size: 10px;
font-family: Lato, sans-serif;
letter-spacing: 1.5px;
text-align: center;
color: #000000;
display: block;
}
.address2:after {
content:"\a";
white-space: pre;
}
}
This last part with the .address2:after I thought should have moved the line after .address2 to the next line at 414px, yet it did not.
Any suggestions as to the best way to handle breaking the lines where I want?
cheers

Answer 1

One issue with display:block is that those elements always are displayed on a line of their own, no matter what the surrounding elements look like; be it display:inline or not.
So to answer your questions: an inline-block span next to a block span will not sit next to it on the same line. And two block spans with    in between will each be on their own line, with another line in between where the    are (this will look like a blank line).
To solve the whole issue, I'd start with simplifying it down to this:
div.addressblock {
text-align: center;
}
div.addressblock span {
font: normal 11px 'Lato', sans-serif;
letter-spacing: 1.5px;
display: inline-block;
color: #000000;
}
div.addressblock a {
font-weight:bold;
padding:0 .5em}
<div class="addressblock">
<span>FEAST THAILAND</span>
<span>10 NAEBKHEHART ROAD HUA HIN</span>
<span>(Inside The Memory Hua Hin) </span>
<span>PRACHUAP KHIRI KHAN, 77110 THAILAND</span><br>
<span>[phone]</span>
<span>OPERATED BY FOOD DISCOVERY (THAILAND) CO., LTD.</span><br>
<span>PRIVACY POLICY
TERMS & CONDITIONS
WAIVER & RELEASE OF LIABILITY</span>
<span><b>©2017</b> ALL RIGHTS RESERVED</span><br>
<span>TAT License No. 14/02344</span>
</div>
With actual breaks where you want the line breaks to be, and all the spans turned into inline-blocks to avoid unwanted breaks inside them, and let the page flow do the rest.
If you then want other things to happen at certain screen widths, you can always add some extra CSS.