How to center content vertically and horizontal with a max-width of 150px?

[Beverleyh]

Glad you’ve sorted it :)

We were all new once… and I can relate to “silly” questions. Believe me, I’ve asked some stinkers in my time! Ha, ha

[Atelierbram]

This is only my first site as such

Are you serious about learning more HTML, CSS and javaScript?

Unfortunatly I didn’t understood your code and when I pasted it it didnt worked out for me

What was it about the code that you didn’t understood? I do want to help you know … On things not working out on first attempt copy and paste; I would say this is to be expected when the CSS styles on positioning of those same elements aren’t out-commented or removed in the stylesheet (like is done in my fork of your demo). Those styles will interfere with the new ones, making a tangled mess of things. It will require a more dedicated effort than just copy & paste I’m afraid.

Did you put some new html classes?

I removed the pull-left class from the pt-cv-thumbnail, and set the float on the a-link element that wraps those images: one always want to float the wrapper-element, not the image itself.

before I’ve learned I could do it from the wordpress editor

In time you will need a better workflow than this (editing in the CMS on the remote host). For web-development one needs a local development environment, and (at least) use FTP to transfer (copy) your style.css (but maybe other page-templates as well) over to your remote host.

It’s fixed now and working

Not really if you look at the third module (with the picture of the lady with the hat): the text is overlapping the image in some instances (drag browser-window to see).

Coming back to flexbox, just a few lines of code can fix all the vertical positioning.

@media (min-width: 800px) { 

  .js-flex-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

}

You need this extra .js-flex-column wrapper-div for that, but alternatively you can insert that wrapper-div in with (jQuery)-javascript.

$(function() {

  $('html').addClass('js-wrap');

  $('.pt-cv-content-item .pt-cv-ifield').addClass('js-flex-row'); 
  $('.pt-cv-content-item .pt-cv-title').addClass('js-el-wrapped'); 
  $('.pt-cv-content-item .pt-cv-content').addClass('js-el-wrapped'); 
  $('.pt-cv-content-item .pt-cv-meta-fields').addClass('js-el-wrapped'); 

  $( '.js-el-wrapped' ).wrapAll( "<div class='js-flex-column' />");

});

I updated my fork of your demo using some additional CSS layout with Flexbox (overriding the layout with floats that was in there).

[claudia7]

Unfortunatly I’m in a hurry to have this website completed and I don’t have much time to analise the code, but I promiss that as soon as I have the time I will study it. I do want to learn. It completes my graphic design habilities.
I think HTML is quite straightforward and I haven’t had any problems with it so far, but it gets more complicated when dealing with CSS. I don’t even venture for now on javacript. I’ll leave it for last.

Thank you for your help Atelierbram!

[Author]

Posts