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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 17
Like Tree5Likes

Thread: Portfolio images shrinking and keeping the number of columns

  1. #1
    Junior Member
    Join Date
    Aug 2015
    Posts
    13
    Member #
    51599

    Portfolio images shrinking and keeping the number of columns

    Hi,

    I'm very noob and this is a problem that came with the template.
    The template is responsive, except for the portfolio part.

    On bigger screens it's ok:
    port-01.jpg

    On mobile, the images shrinks:
    port-02.jpg

    Well, I guess what I want to do here is obvious. I want the portfolio to display only one columns on mobile.
    The thing is, when I put the code "col-xs-12", the page displays only one column, but the images shrinks anyway. I guess "col-xs-12" was suppose to display only one column on small devices, not entirely sure.


    Here some of the code, I'm not sure that's the part that u guys need to find the problem, I cant paste whatever u guys want tough.

    HTML:
    <div class="portfolio-item corporate">
    <div class="portfolio-item-inner">
    <img class="img-responsive" src="images/portfolio/monitoria.jpg" alt="">
    <div class="portfolio-info">
    <h3>CEMAT</h3>
    Monitoria
    <a href="#portfolioModal1" class="preview" data-toggle="modal"><i class="fa fa-arrows-alt"></i></a>
    </div>
    </div>
    </div> <!--/.portfolio-item-->
    CSS:
    #portfolio .portfolio-items {
    margin: -10px;
    }
    #portfolio .portfolio-item {
    float: left;
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0 1% 1% 0;
    overflow: hidden;
    position: relative;
    width: 32%;
    }
    #portfolio .portfolio-item .portfolio-item-inner {
    position: relative;
    }
    #portfolio .portfolio-item .portfolio-item-inner .portfolio-info {
    opacity: 0;
    transition: opacity 400ms;
    -webkit-transition: opacity 400ms;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    }
    Thakz a lot.

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    #portfolio .portfolio-item width is set to 32%. This is why you always have three pics in row.

  4. #3
    Junior Member
    Join Date
    Aug 2015
    Posts
    13
    Member #
    51599
    I removed that line and added this before every portfolio item: <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
    Last edited by heuder; Aug 19th, 2015 at 07:49 AM.

  5. #4
    Junior Member
    Join Date
    Aug 2015
    Posts
    13
    Member #
    51599
    So... not solved.

    As I said I deleted the line "width: 32%;" and changed the html code:

    <div class="row">

    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
    <div class="portfolio-item corporate">
    <div class="portfolio-item-inner">
    <img class="img-responsive" src="images/portfolio/monitoria.jpg" alt="">
    <div class="portfolio-info">
    <h3>CEMAT</h3>
    Monitoria
    <a href="#portfolioModal1" class="preview" data-toggle="modal"><i class="fa fa-arrows-alt"></i></a>
    </div>
    </div>
    </div>
    </div><!--/.portfolio-item-->
    And closed the "row" after three portfolio items and opened another other for the other three.
    On mobile it's OK, aligning to the LEFT, don't know why, but acceptable.

    But on large devices, I get this:

    l8JWBpBl.jpg

  6. #5
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    This should work well:

    Code:
    <div class="portfolio-item corporate container-fluid">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                        <div class="portfolio-item corporate">
                            <div class="portfolio-item-inner">
                                <img class="img-responsive" src="images/portfolio/monitoria.jpg" alt="">
                                <div class="portfolio-info">
                                    <h3>CEMAT</h3>
                                    Monitoria
                                    <a href="#portfolioModal1" class="preview" data-toggle="modal">
                                        <i class="fa fa-arrows-alt"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div><!--/.portfolio-item-->
                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                        <div class="portfolio-item corporate">
                            <div class="portfolio-item-inner">
                                <img class="img-responsive" src="images/portfolio/monitoria.jpg" alt="">
                                <div class="portfolio-info">
                                    <h3>CEMAT</h3>
                                    Monitoria
                                    <a href="#portfolioModal1" class="preview" data-toggle="modal">
                                        <i class="fa fa-arrows-alt"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div><!--/.portfolio-item-->
                    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                        <div class="portfolio-item corporate">
                            <div class="portfolio-item-inner">
                                <img class="img-responsive" src="images/portfolio/monitoria.jpg" alt="">
                                <div class="portfolio-info">
                                    <h3>CEMAT</h3>
                                    Monitoria
                                    <a href="#portfolioModal1" class="preview" data-toggle="modal">
                                        <i class="fa fa-arrows-alt"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div><!--/.portfolio-item-->
                </div>
            </div>

  7. #6
    Junior Member
    Join Date
    Aug 2015
    Posts
    13
    Member #
    51599
    Thank you for the help.

    I tried ur code but the items don't even show.

    I guess the problem is with the "width = 33.3333%" from the Boostrap.

    When I use width = 32% works fine, but if a set width 33.333% I get the same problem.

    It seems to me that with 33.333% for the items, they don't have enough space to fit in one row.

    Sure, I don't think the 33.333% is the problem, maybe there is something on the portfolio items that are making it wider, maybe, I don't know. I'm just a newbie.

  8. #7
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    If you use bootstrap styles you will avoid such problems. Check your custom styles for padding and margin.
    Or, you can just overwrite bootstrap classes in your css, like:

    col-lg-4, col-md-4 {
    width: 32%;
    }

    Don't forget to load your css after bootstrap...

  9. #8
    Junior Member
    Join Date
    Aug 2015
    Posts
    13
    Member #
    51599
    I tried to change the bootstrap, but it doesn't work, it change something but it show just two columns.

    body {
    padding-top: 25px; /*Not sure what it is, changing it to 0 didn't fixed*/
    background: #fff;
    font-family: 'Roboto Slab', sans-serif;
    font-weight: 400;
    color: #64686d;
    line-height: 28px;
    margin: 0;
    padding: 0;
    display: block;
    overflow-x: hidden;
    }

    I've tried to change everything to zero, and didn't fixed, I put a comment on everything i tried to change:
    #portfolio .portfolio-items {
    margin: -15px; /*Vertical space before and after the portfolio items*/
    }
    #portfolio .portfolio-item {
    float: left;
    padding: 15px; /*Margin between portfolio items*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    margin: 0 1% 1% 0; /*Don't know but changing to 0% didn't fixed*/
    overflow: hidden;
    position: relative;
    }
    #portfolio .portfolio-item .portfolio-item-inner {
    position: relative;
    }
    #portfolio .portfolio-item .portfolio-item-inner .portfolio-info {
    opacity: 0;
    transition: opacity 400ms;
    -webkit-transition: opacity 400ms;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px; /*Margin of the text inside the picture of the portfolio item*/
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    }

    How do I know the css is loading after bootstrap, just the order??
    <title>Solvertab</title>
    <!-- core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/owl.carousel.css" rel="stylesheet">
    <link href="css/owl.transitions.css" rel="stylesheet">
    <link href="css/prettyPhoto.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    And here is the thing, when I press F12 to preview the page, the portfolio looks fine, but when the page finish loading, the portfolio items change places...


    Thank you very much for ur help Sasha, I posted this in many forums u are the only one helping me.
    I'm already stressed with this problem, almost giving up, maybe I should just let the mobile users be unable to see the portfolio.
    Last edited by heuder; Aug 20th, 2015 at 05:08 AM.

  10. #9
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Yes, order matters.

    You may not give up. Job of designer and programmer is to solve problems. So, do your job. With every new bug you will learn something new and improve yourself.

    Your problem is simple. Images haven't enough space to display in one row. Simplify your code until find problematic element, class, id or property.
    If you cannot solve it, upload it somewhere. People will help you if they can see your code in action. Me too.

    p.s.
    Switch off all of the css files other than bootstrap. If layout works, switch on one by one of the other css files until you find problematic one. Then focus on this file and switch on one by one class to find the problematic one.
    It is much simpler with firebug plugin for firefox browser.
    Last edited by sasha_bolcina; Aug 20th, 2015 at 04:35 PM.
    Vapr_Arts and heuder like this.

  11. #10
    Junior Member
    Join Date
    Aug 2015
    Posts
    13
    Member #
    51599
    Tried that, no matter what css I disable, I always get the error.

    Another guy said to me this:

    Because they're still taking up only 32% of the available screen width.
    You need to learn media queries. When the screen gets below a certain pixel width (determined by your design) your image width goes to 100%, or another "screen-filling" percentage. Something like this:


    @media only screen and (max-width: 700px) {
    img {max-width: 95%;}
    }
    I'll study about media queries tomorrow.

    If u want to, u can download my website files here http://ge.tt/api/1/files/9bTiUZM2/0/blob?download

    Thank you.


Page 1 of 2 1 2 LastLast

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
  •  

Tags for this Thread

All times are GMT -6. The time now is 10:43 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com