Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Jun 2016
    Posts
    4
    Member #
    54414

    Responsive design

    I am trying to create a responsive web page. The page is for engagement schedule. Band website. I want the dates, venue and location to be inline. But to be responsive for smaller devices to display one under the other if you understand what I mean. Not sure what tag to use. Div, article or some other. A lot of good tutorials out there but not what I need. Please help.

  2.  

  3. #2
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    The tag you choose isn't going to make it responsive without some CSS. You could use a div and then set "display:inline-block;" in your CSS - that will keep all of your divs on the same line as long as there is room. Something like this: https://jsfiddle.net/hvg5r66f/ (resize the results area to see how it responds).

    You may also want to use media queries in your CSS to have better control, for example, you could change those divs to "display:block" once the screen size gets below a certain width.
    Kevin Henney
    CRUCIAL CREATIVE
    Web Development - Graphic Design - Branding

  4. #3
    Junior Member
    Join Date
    Jun 2016
    Posts
    4
    Member #
    54414
    Thank you for your help. I do understand the code somewhat, but I haven't figured out the CSS. I want each line of info to have a background color or image (I haven't decided which yet). And I want each line to be centered on the page. I'm thinking that each div for venue, date and location should have a container div. Is this correct? Again thanks for your input.

  5. #4
    Junior Member
    Join Date
    Jun 2016
    Posts
    4
    Member #
    54414
    One more thing. For an example take a look at Brad Paisley's tour page (the dates and venues and ticket section). That's the effect I'm trying to achieve.

  6. #5
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    I think this is pretty close to what you're looking for: https://jsfiddle.net/hvg5r66f/1/
    It would need to be adapted to your particular site, but you can see how the media queries would work.
    Kevin Henney
    CRUCIAL CREATIVE
    Web Development - Graphic Design - Branding


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:54 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com