Jump to content

Responsive Design With Bootstrap


youngros

Recommended Posts

I have a weather website, built from the ground up and totally non responsive. It was basically only written for me to access the data, but I find that it is quite popular. So thinking that I ought to make a responsive homepage at least would be a start and then I can sort out which pages will not fit a mobile device, large tables full of data, can be left of the mobile menu.

I have had a play around with Bootstrap and so far so good. But, I have a forecast that is output as a table via a php script. Currently the table is 10 columns, which is fine on a big monitor, but too big for tablets and mobiles. I can output the table as 8,6 and 4 columns but I am unsure as to how to out put the forecast depending on media query.

At the moment it is a php iclude  <?php include ('wsmetno3/printicons2.php'); ?> what I need is something to say use that one for screens 992px and up a smaller version between 991px and 480px and then below 480px the smallest one. Hope this makes sense!

Thank you for reading and Happy Easter.

Rosalind

Link to comment
Share on other sites

You won't be able to switch an include based on the screen resolution. You can include multiple sizes all at once when the page is first loaded, and then use media queries to hide/show the correct content at different sizes. You can also assign a column multiple widths at different screen sizes. For example, since the grid is 12 columns, you could have a section that is 2 columns wide on large devices (".col-lrg-2") but 4 columns on medium devices (".col-md-4"). So that would look like this:

 

<div class="col-lg-2 col-md-4">Column content...</div>

Link to comment
Share on other sites

Hi Ben, thanks for the response.  Loading two forecasts and then specifying which one to show on which devices had originally been my thought. But I can't load more than one forecast as they are php scripts and I get  Fatal error: Cannot redeclare metnocommontemp() (previously declared in..........) Lots of variables are declared like this so back to the drawing board. Interestingly I ran the test page I had through Google's mobile checker with just the eight columns and it passed. I suspect it might be a bit small to read, but I don't have a mobile device to check with.

Rosalind

Link to comment
Share on other sites

If all the data you are displaying is the same for both desktop and mobile devices, I would focus on using both the built in Bootstrap options and potentially custom media queries to adjust the layout to fit the device and hide/show elements as necessary.

 

If the data needs to be different for different devices, sounds like the only way would be to build the PHP differently to avoid those errors. That particular error means that you have two functions that are named the same, so either you need to rename it, or if it's common functionality shared by both includes, you can keep one and you don't need the duplicate. Duplicated variables won't necessarily cause errors -- depends on the variable scope.

 

For quick and dirty mobile testing, assuming of course that you are using media queries, you should be able to simply resize your browser to get a feel for how the layout changes at different device widths. It's not perfect -- ideally, you'd have a smart phone to test on -- but it isn't like you are completely without options for testing.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...