Page 1 of 1
Reduce line space and fill gap in responsive layout
Posted: Tue Nov 16, 2021 3:51 am
by M33R4
lineheightblankspace.PNG
This is a responsive layout using 4 cells (columns) which I am using as a footer.
Queries I cannot resolve are above in yellow, and, would appreciate your help on are:
How can I reduce the gaps between the lines to just 1 or 1.5
How do I get background colour in the white gap
Many thanks.
Re: Reduce line space and fill gap in responsive layout
Posted: Tue Nov 16, 2021 5:33 am
by M33R4
I managed to reduce the line spacing on the Stylesheet - amended the <p> tag with less spacing and that's resolved it.
The white gaps however continue to be an issue 
Re: Reduce line space and fill gap in responsive layout
Posted: Tue Nov 16, 2021 7:04 am
by M33R4
lineheightblankspace.PNG
Can you please help me resolve this issue with the gaps in my footer I've put a yellow rectangle around the issue.
Aim is for this footer to have a block of blue background colour but as you can see there are gaps in it.
Here is the coding:
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
<head>
</head>
<body>
<MadCap:topicToolbarProxy class="" style="mc-topic-toolbar-items: ;" />
<MadCap:breadcrumbsProxy />
<div class="row">
<div class="large-1 columns">
<MadCap:menuProxy style="mc-context-sensitive: True;mc-include-parent: True;mc-include-siblings: True;mc-include-children: True;" />
</div>
<div class="large-9 large-offset-1 columns">
<MadCap:bodyProxy />
</div>
</div>
</body>
<div class="Tiles-3-3-3-3" style="background-repeat: no-repeat;background-image: none;">
<div style="background-image: none;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;">
<p style="color: #ffffff;font-size: 12pt;padding-left: 50px;">
<p style="font-size: 12pt;color: #ffffff;padding-left: 150px;padding-right: 90px;"><b class="bUnd" style="text-decoration: none;">Contact us</b>
</p>
<p>
<hr />
</p>
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;"> hiddenwording</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">hiddenwording </p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">hiddenwording </p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">hiddenwording</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">hiddenwording</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 90px;">Phone: hiddenwording</p>
<p> </p>
<p> </p></div>
<div style="background-image: none;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;">
<p style="color: #ffffff;font-size: 12pt;">
<p style="font-size: 12pt;color: #ffffff;padding-left: 150px;"><b class="bUnd" style="text-decoration: none;">Solutions</b>
</p>
<p>
<hr />
</p>
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Radiology
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Maternity
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Electronic Health Records
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Oncology
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Pathology
</p>
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">
<p class="lesslinespace">
<p class="lesslinespace" style="padding-left: 150px;padding-right: 100px;">Data Management Services
</p>
<p> </p><p> </p></p>
<p> </p>
</p>
</div>
<div style="background-image: none;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;">
<p style="font-size: 12pt;color: #ffffff;">
<p style="font-size: 12pt;color: #ffffff;padding-left: 100px;"><b class="bUnd" style="text-decoration: none;">About us</b>
</p>
<p>
<hr />
</p>
</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">About</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">News</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">Events</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">Privacy policy</p>
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">
<p class="lesslinespace" style="padding-left: 100px;padding-right: 100px;">Support</p>
<p> </p>
<p> </p> <p> </p></p>
</div>
<div style="background-image: none;padding-left: 0px;padding-right: 0px;padding-top: 0px;padding-bottom: 0px;">
<p style="font-size: 12pt;color: #ffffff;">
<p style="font-size: 12pt;color: #ffffff;padding-left: 0px;padding-right: 200px;"><b class="bUnd" style="text-decoration: none;">Follow us</b>
</p>
<p>
<hr />
</p>
</p>
<p style="padding-left: 0px;padding-right: 200px;">
<img src="../Images/_Logo/48_tw.png" style="width: 47px;height: 47px;" /> <img src="../Images/_Logo/48_li.png" style="width: 47px;height: 47px;" /></p>
<p>
<p style="padding-left: 0px;padding-right: 200px;">
<img src="../Images/_Logo/ISO-9001-1019.png" style="height: 47px;width: 90px;" /> <img src="../Images/_Logo/ISOIEC-27001.png" style="width: auto;height: 47px;" /></p>
<p style="padding-left: 0px;padding-right: 200px;">
<img src="../Images/_Logo/Cyber-Essentials-Logo.png" style="width: auto;height: 47px;" /> <img src="../Images/_Logo/corips.png" style="width: auto;height: 47px;" /></p>
</p>
</div>
</div>
</html>
Re: Reduce line space and fill gap in responsive layout
Posted: Tue Nov 16, 2021 8:25 am
by NorthEast
Put the footer content inside a container like a <div> or <footer> tag, and set the background colour on that.
HTML:
Code: Select all
<footer>
<div class="Tiles-3-3-3-3" style="background-repeat: no-repeat;background-image: none;">
...
</footer>
CSS:
Code: Select all
footer { background-color: #0000ff; }
Also, the entire footer <div> is outside of the closing </body> tag, which means it's invalid HTML - it needs to be inside the body tag.
Re: Reduce line space and fill gap in responsive layout
Posted: Mon Nov 22, 2021 5:32 am
by M33R4
Dave Lee wrote:.....Also, the entire footer <div> is outside of the closing </body> tag, which means it's invalid HTML - it needs to be inside the body tag.
I tried the footer inside the body tag but my footer was as wide as the body content (for obvious reasons). I need my footer to be as wide as the browser window and not as wide as the body please?