Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #406848

    I am using 1/4 width team member profile boxes for a section of my site, so when there’s 4 it’s a nice, even effect, but when I have 2-3 members only, it aligns left and looks odd. How do I center align the entire profiles (I currently align the text as ‘justify’ so I want to keep that) in center so it’s ALWAYS centered no matter if I have 2, 3, or 4 members.

    My inquiry seems to be the same as this guy’s (https://kriesi.at/support/topic/enfold-team-members-photobox-alignment/) but those modifications didn’t work for me.

    #407102

    Hi Apollo87!

    This is how it looks on my end – http://i.imgur.com/uVPDIse.png
    Can you please post a screenshot and show the issue you are seeing? Seems like you have figured it out already :)

    Best regards,
    Yigit

    #407377

    Hey Yigit,

    Sorry maybe i was being unclear. OK you see under “contributors” how there are currently 3 profiles but an obvious blank space on the right (this is because there are currently x3 1/4 team member boxes in the layout being used). I don’t have another member to fill in that area at this moment, so I want to center those 3 profiles ON THE PAGE, not in themselves. And if I only had 2, I would want them centered on the page, and not all the way on the left.

    Does that make sense?

    #407491

    OK I’ve uploaded a couple photos to make it clearer.

    This is what it looks like now

    and this is what i’m trying to achieve

    #408092

    Hey!

    Please add a color section element with a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png and add your team member columns inside it and place an empty column element to center elements on desktop and then add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 768px) {
    #your-custom-id .first { display: none !important; }}

    Cheers!
    Yigit

    #410869

    didn’t seem to work.

    this is one part I didn’t understand from your reply:

    “place an empty column element to center elements on desktop” >> what kind of empty column element? i can’t really place an empty element and still center the page which is why i made the topic in the first place. to restate the original issue:

    i have x3 profiles that i want to keep at 1/4 size each. that means i have 3/4 page of content. i can make them all 1/3 of the page and they would naturally center, but i want to keep the size as 1/4 each and have them centered on the page.

    i added all of the profiles into a color section with the section id “contributors”. from there i inputted the CSS as follows:

    .page-id-2062 @media only screen and (max-width: 768px) {
    #contributors .first { display: none !important; }}

    I don’t know if I’m missing something in the code syntax, but I tried with dots before @media as well and a bunch of other combinations. i got the section to budge ONCE with one iteration, but even then the color section only moved slightly right and it wasn’t centered.

    this is the section i am referring to: http://www.thejetcoaster.com/team/#contributors

    #411058

    Hi!

    It seems like you are placing your elements inside 1/4 column element. Please try using 1/3 column element instead.

    Cheers!
    Yigit

    #440168

    I appreciate your efforts, Yigit.

    I want to try to restate my problem more clearly. I apologize if I miscommunicated previously.

    Regarding the “Team Member” content element, you can resize it to different sizes.

    Some of these sizes match up to meet the page width quite nicely (for example, having two 1/2 width team member, three 1/3 width team members, etc.).

    You can resize these boxes freely to fill any page you like (for example, if you have 4 team members, you can just use four 1/4 width boxes).

    Alternatively, you can use empty boxes to center things (for example, if you have 2 team members and don’t want them to appear at 1/2-width size, you can put four 1/4-width boxes and leave the outer ones blank so the 2 profiles appear in the middle).

    So far so good.

    However, the size of these boxes is important to me, and I want the team member boxes themselves (not talking about the text, or titles, but the actual content element) to be centered on the page. For example, if I have only one team member in a given section, I don’t want to have to make their profile a full page width, but maybe 1/3 or a 1/4 page width box and have that small team member box be aligned center on the screen. Currently, it is automatically aligns left.

    Here's an example

    Here is a live link to that example.

    Ideally I would want to do this:

    Here's what I would like to do

    To align this single profile center on the page, I would currently have to shrink it to 1/5-width and put two empty boxes on either side, or enlargen it to 1/3 and do the same thing.

    Basically stated, I want the team member content element boxes to automatically align center on the page rather than left, regardless of size. Using empty content boxes is not always an option to kind of ‘trick’ the boxes to align center because sometimes I don’t want to change the team member box size.

    Very sorry for the trouble. Thanks for all your help so far!

    • This reply was modified 9 years, 7 months ago by Apollo87.
    #440928

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (min-width: 990px) {
    .page-id-2062 .avia-builder-el-23 {
      margin-left: 25%;
    }}

    Cheers!
    Yigit

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.