dcsimg
www.webdeveloper.com
Results 1 to 11 of 11

Thread: Responsive site issues

Hybrid View

  1. #1
    Join Date
    Aug 2011
    Posts
    37

    Responsive site issues

    Hi y'all.

    So I have this site that I'm working on, it's a responsive template which I downloaded. The responsiveness works well and I had no issues up until i added a Javascript / jQuery carousel in the "team" section. The whole site is still responsive except that carousel. Anyone could shed some knowledge my way on what i need to do in order to make the carousel responsive as well?

    Look under the "team" section. It displays 4 names at-a-time with a right then a left button.
    http://www.marcusgroup.com/2013/index.html

    Thank you so much in advance for any feedback you guys can throw at me.

    Serge

  2. #2
    Join Date
    Mar 2012
    Posts
    1,816
    If you wish to build a responsive site using pre-written templates and the like, I would suggest that you only use code that was written to be responsive. Amending other people's code to do things it was never intended to can be harder than writing your own code from scratch!

  3. #3
    Join Date
    Aug 2011
    Posts
    37
    Well, I purchase the main template, but added the carousel section myself. Yes, I did find it online, but I was hoping that it would play nice once placed within the responsive code. I'm totally naive when it comes to making a site responsive, so I was hoping someone would just tell me what exactly I need to modify in order to get me headed in the right direction.

  4. #4
    Join Date
    Mar 2012
    Posts
    1,816
    Anyway, I've had a look at the code and it seems to me that the problem is in the CSS file team/slider.css:

    #slider2 .viewport {
    float: left;
    width: 1048px;
    height: 388px;
    overflow: hidden;
    position: relative;
    }

    If you change "width: 1048px;" to something like "width: 80%;" that might just make the viewport responsive. I haven't tested it, but that might just do the trick!

  5. #5
    Join Date
    Mar 2012
    Posts
    1,816
    Why do you think that code needs to be written differently to be responsive in the first place? Because conventional code is NOT responsive. So no, it won't magically become responsive just because it is incorporated in an otherwise responsive web page. Also there are a number of ways of writing code to be responsive. You can even write responsive code using position:absolute!
    Last edited by jedaisoul; 05-24-2013 at 03:48 PM.

  6. #6
    Join Date
    Aug 2011
    Posts
    37
    Dude, If you want to help great, if you don't, move along. I don't need your condescending / sarcastic comments. I simply asked for help, or to be pointed in the right direction, if you can't, DON'T COMMENT! have a swell day.

  7. #7
    Join Date
    Aug 2011
    Posts
    37
    Thanks for your help. I will update the result a lil later.

  8. #8
    Join Date
    Mar 2012
    Posts
    1,816
    Sorry for the condescension. I hope it works!

  9. #9
    Join Date
    Aug 2011
    Posts
    37
    That helped a lot. I also switched the height to % instead of fixed pxs. Not sure if that's common-practice in responsive coding (making the height %), but it helped as well. But now, the text in the individual boxes is getting hidden. I will look into the that issue now. Thanks again.

  10. #10
    Join Date
    Mar 2012
    Posts
    1,816
    I'm glad that helped.

  11. #11
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267
    Use percentages for WIDTH:90%; and pixels for min-width:25px; and max-width: 500px;

    To maintain aspect-ratio of images, make HEIGHT:auto;

    Not sure if height will automatically adjust if omitted, but I have good result using height;AUTO;

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles