Centering elements within container..

  • Resolved MasterOmok

    (@masteromok)


    10 years, 2 months ago

    I am working on a responsive website, and need the portfolio elements to be centered within the container. I already purchased the pro version so I could change the size of the elements to fit on my responsive versions, but I cannot get the elements to center. I am using the “Blocks Toggle Up/Down” option.

    The container by default takes up 100% width, which is what I want, but the content inside is not centered. When my site is at it’s highest width there are two elements on the same line, but they are left aligned. For example I have six items, with ‘|’ indicating the container boundaries:

    |(item)(item)(space)|
    |(item)(item)(space)|
    |(item)(item)(space)|

    I would like it to be centered like the following:

    |(space)(item)(item)(space)|
    |(space)(item)(item)(space)|
    |(space)(item)(item)(space)|

    This also comes into play when the site is at one of it’s smaller widths, and only one element per line is visible:

    |(item)(space)|
    |(item)(space)|
    |(item)(space)|
    |(item)(space)|
    |(item)(space)|
    |(item)(space)|

    When I would like that to look like:

    |(space)(item)(space)|
    |(space)(item)(space)|
    |(space)(item)(space)|
    |(space)(item)(space)|
    |(space)(item)(space)|
    |(space)(item)(space)|

    It appears that the div “element hugeitmicro-item” is the container for each item, but it is absolute positioned at left 0px top 0px for each.. I’ve been trying to toy with some of the CSS to move them around, but I just cannot seem to get it working. How can I accomplish centering the items?

    https://www.ads-software.com/plugins/portfolio-gallery/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author huge-it

    (@huge-it)

    Dear customer as you are commercial version user please contact us on [email protected] as your problem may not associate with other users.

    Thread Starter MasterOmok

    (@masteromok)

    I will email to follow up, but this is most likely an issue that will affect others as well. I assume that I am not the only one that would like the elements centered within the container. Also, this would not be limited to the commercial version – it would affect free version as well.

    Plugin Author huge-it

    (@huge-it)

    Dear @masteromok Huge-IT Portfolio Gallery works the way it should. We have set it to take the whole width of its parent element. Maybe we add such functionality when some other users post about it too.

    Hi,
    I seem to be having this problem too. The items just keep aligning themselves to the left. Any luck MasterOmok? I’m pretty sure this can be solved with just a slight CSS tweak

    Thread Starter MasterOmok

    (@masteromok)

    What I did is not ideal because it requires multiple updates if we decide to change the thumbnail size or padding any time later.. But what I did is force the container to be a size of three thumbnails and centered that container. Our thumbnail is 222px wide.

    #huge_it_portfolio_content {
    width: 740px;
    margin: 0 auto;
    }

    Then for when the screen resolution will only allow 2 to be shown on the same line, I made the container smaller to only fit two.

    @media only screen and (max-width: 900px) and (min-width: 600px)
    #huge_it_portfolio_content {
    width: 500px;
    margin: 0 auto;
    }

    And then when it goes down to one only being able to be shown I make the container smaller again.

    @media only screen and (max-width: 599px) and (min-width: 1px)
    #huge_it_portfolio_content {
    width: 240px;
    margin: 0 auto;
    }

    Like I said, not ideal. As well as not a true center because of the the padding. Honestly it should just be a setting in the plugin area to center the items versus left aligned.. but that’s up to the developers. So a hacky approach is needed to center them, but it works.

    If you want to see how it looks, this is the site I was having issues with initially: https://www.wcitservices.com/portfolio/

    Hi Master Omok, I used your code in my child theme but it didn’t work. I’m surprise it works perfectly on your site. I guess I’m doing something wrongly or is it because I’m using the free version.
    Thanks for your input.

    Dear users free or pro. i would like to inform you that we have beta version of Portfolio already centered, but without category & sorting buttons. If it is ok for you, please contact us by [email protected] and we will send you the file

    I contacted the support team yesterday and I received the version of portfolio already centered. Great plugin and great support!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Centering elements within container..’ is closed to new replies.