I've noticed that my multi-line address in the footer is not breaking correctly at certain screen widths.
Each line of the address is enclosed within a <span> tag with a specific class and then styled either as block or inline-block in the CSS file.
However, I have encountered an issue where a couple of lines are not displaying as intended, and I'm struggling to determine the cause of this problem.
Irrespective of the styling applied to a particular line, it always appears on a separate line instead of aligning with adjacent lines. Additionally, at 768px, two lines break as expected, but there is an unwanted gap between them.
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”>+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>    <a href="http://feastthailand.com/terms-conditions/"><strong>TERMS & CONDITIONS</strong></a></span>    <span class="address7"><a href="http://feastthailand.com/waiver-release-liability/"><strong>WAIVER & 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>
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;
}
The standard CSS code provided lacks media queries, but I am facing issues with the formatting of .address4, which should be alongside .address3 but isn't. Any suggestions on why?
Also, when viewed at 768px, .address7 moves below .address6 as required, however, there is a strange gap between these two lines. Can anyone shed light on this issue?
I have experimented with various methods including adding classes to
tags and adjusting the styling based on screen width using media queries like shown below:
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;
}
}
Although I used .address2:after to move the line following .address2 to a new line at 414px, it didn't produce the desired result. Any recommendations for a better approach to handle line breaks as needed?
Cheers!