Dividing a Header into Columns

[paulweller84]

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

 

 

 

 

 

 

[dauruk0512]

I suggest to you use bootsrap then you devide it every screen. each screen you should write css then use media query in every css then resize every tag you need it !

 

here is mine simple css

<!-- http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries--><!--Large desktops and laptops--><link rel='stylesheet' media='screen and (min-width: 1200px) ' href='<?php echo base_url() ?>asset/css/largedesktop.css' /><!-- Landscape tablets and medium desktops--><link rel='stylesheet' media='screen and (min-width: 992px) and (max-width: 1199px) ' href='<?php echo base_url() ?>asset/css/landscapetablet.css' /><!-- Portrait tablets and small desktops--><link rel='stylesheet' media='screen and (min-width: 768px) and (max-width: 991px)' href='<?php echo base_url() ?>asset/css/portraittablet.css' /><!--Landscape phones and portrait tablets --><link rel='stylesheet' media='screen and (max-width: 767px) ' href='<?php echo base_url() ?>asset/css/landscapephone.css' /><!-- Portrait phones and smaller --><link rel='stylesheet' media='screen and (max-width: 480px) ' href='<?php echo base_url() ?>asset/css/portraitphone.css' />

hope this make sense of you !

[paulweller84]

Hi Dauruk, thanks for your reply.

 

Unfortunately I have no idea what Bootstrap or Media Query is/are? I am very new to this, I'm not a web designer I am doing this for my driving related business. I hoped the answer to my question was simpler than that!

 

Paul