Hi,
I'm trying to divide the header of my website into 3 columns and using a method suggested on a forum managed to get the result I wanted - but only on a desktop viewed site. The code is used was
<div class="header">
<div style="float:left; width:33%">Column 1 Stuff</div>
<div style="float:left; width:33%">Column 2 Stuff</div>
<div style="float:left; width:33%">Column 3 Stuff</div>
</div>
It looks like this;
The problem came however when trying to view the same page on a mobile device (iPhone 6). As the columns were sized using a 33% ratio. it's kept the same ratio obviously which has caused the images to be shown very small and the text to stay the same size but be forced down onto multiple lines.
Like this;
What I am trying to achieve is this;
I've tried searching for the answer but to no avail, tried a few different methods but nothing is working for me.
Suggestions very much welcome!
Thanks
Paul