Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
How familiar are you with CSS?
I understand the basics and where to look for things but not much otherwise.
When your theme is responsive, your content should be too.
Don’t use a table for 2 cells. Style it like this:
<hr class="featurette-divider" />
<div class="row">
<div class="span5 offset1">
FIRST CELL CONTENT HERE
</div>
<div clas="span5">
SECOND CELL CONTENT HERE
</div>
<div class="span6 offset3" style="text-align: center;">
<h4>
BOOK NOW LINK HERE
</h4>
</div>
</div>
and let the browser/device decide if it has room for 2 cells side by side. If it does, they’ll be displayed on two columns, with the link, bigger and centered, under them. If not, on narrow devices, the 2nd text will flow under the 1st, followed by the link.
Narrow your browser and you’ll see what i’m talking about.
thank you, I made the changes and I see what you mean. any easy way to change the background colour for that area? I tried to find something myself but couldn’t find any colour attributes for those tags. I am trying to separate it clearly from the rest of the text.
Sure, but you need to insert one more wrapping div in it (so you have offset1 from the margins) and that changes the structure a bit:
<div class="row"><div style="background-color: #fff; padding: 20px; border: 1px solid #e6e6e6; box-shadow: inset 0 2px 9px rgba(0,0,0,.1); border-radius: 9px;" class="span10 offset1">
<div class="span6">
CELL 1 HERE
</div>
<div class="span6">
CELL 2 HERE
</div>
<div class="span5 offset3" style="text-align: center;">
<h4><a title="Contact us" href="http://www.motoridetransylvania.com/contact-us/">BOOK NOW</a></h4>
</div></div></div>
Styled it up a bit too.
thank you so much, makes a huge difference in look
