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

[claudia7]

I’m trying to center each text and button related to each image of this page:
cnorcreative.com/corbyssimas

I’m using the following css:

.pt-cv-readmore . btn .btn-success{

display: block;
margin: 0 auto;
margin-right: auto;

top: 50%;
transform: translate(0, 300%)

}

.pt-cv-title{
text-align: center;

padding-left: 40px;;
/* 2 /
top: 50%; / 3 */
transform: translate(0, 300%)
}

.pt-cv-content{

padding-left: 40px;
position: relative; /* 2 /
top: 50%; / 3 */
transform: translate(0, 100%)

}

.pt-cv-meta-fields{
text-align: center;

padding-left: 40px;
/* 2 /
top: 50%; / 3 */
transform: translate(0, 400%)

}

I’ve tried also with:

display: block;
margin: auto;

with no success.

What am I doing wrong?

[Beverleyh]

At first glance, looking at what you’ve posted, there seems to be some missing/mixed-up positioning (absolute on child/relative on parent) that should go along with transform:translate;. See the link at the bottom of this post for all-in-one advice to correct that.

But…

It will be easier for us if you provide a reduced demo in CodePen, since the prospect of poking about in the dev console of someone else’s complete web page can be somewhat off-putting to casual forum enthusiasts; all that extra HTML/CSS and an unknown codebase… sadly, not very inviting.

A nice simple demo showing just enough markup and styling to illustrate the problem would be much appreciated; faster for us to digest and edit, etc., means you’re more likely to get the help you need quickly.

Until then, it looks like you could benefit from reviewing this page https://css-tricks.com/centering-css-complete-guide/

[claudia7]

Thank you Beverleyh.

Here’s codepen link:

https://codepen.io/cnor/pen/YVpZMB

[Beverleyh]

reduced as in, just enough HTML and CSS to illustrate the problem, otherwise folks won’t hang around to filter through all the superfluous code for you.

But like I said before, look at the tutorial again and check the positioning of parent and child elements (which should be relative and absolute respectively). https://css-tricks.com/centering-css-complete-guide/

[claudia7]

I’ve reduced the HTML.

As for positioning of parent and child elements (which should be relative and absolute respectively), I’ve tried that already with no success.

I don’t know what I’m doing wrong.

[claudia7]

This code works in desktop:

#pt-cv-view-e45d6569tw > div > div:nth-child(1){
position: relative;
}

.pt-cv-readmore {
position: absolute;
top: 85%;
left: 63%;
transform: translate(-50%, -50%);
}

.pt-cv-title{
position: absolute;
top: 30%;
left: 67%;
transform: translate(-50%, -50%);
}

.pt-cv-content{
text-align:center;
position: absolute;
top: 50%;
left: 67%;
transform: translate(-50%, -50%);
}

.pt-cv-meta-fields{
position: absolute;
top: 80%;
left: 67%;
transform: translate(-50%, -50%);
}

But the text overlaps the images when I reduce the size of the browser window.
Any sugestion?

[claudia7]

I’ve updated codepen

[Beverleyh]

But the text overlaps the images when I reduce the size of the browser window.
Any sugestion?

Normally you’d just use a media query and change the styling at the desired breakpoint. However, it looks like you’re using Bootstrap so there should be some baked-in classes to switch column layout at pre-defined widths/breakpoint. Unfortunately I am not a Bootstrap expert as I prefer to write my own code. The docs can probably offer more assistance than I can in that respect. I think this is the place http://getbootstrap.com/css/#grid-example-basic

[claudia7]

Thank you for your reply Beverleyh,

I’m glad you noted this. I’m using a wordpress theme. I will try to edit the html file in editor and see if it helps.

[claudia7]

The problem is that both the images and the text are part of a plugin and I have no idea how to edit this.
The plugin is called Content Views and is perfectly responsive if I dont style the text+button. Maybe I’m not using the correct classes? I’ve tried with all other classes and only these seem to want to be styled…

[Beverleyh]

If it is perfectly responsive without the addition of these new styles, try wrapping them in a media query so that they only take effect on wider screens.

[claudia7]

Thanks B., it’s almost there.

I’ve wrapped it with the following:
@media screen and (max-width: 2600px) and (min-width:800px)

The text doesnt overlap the images anymore, the only problem now it’s that it has some big gaps between the elements.

You can check for yourself:
cnorcreative.com/corbyssimas

I think it might be because of the percentage I’m giving it from the top?
The problem is when I try to wrap the same code (but separatly) with smaller top percentages with:

@media screen and (max-width: 799px) and (min-width:256px)

everything gets unformated again.

I’m probably making something wrong.

Thanks again for helping a newbie.

[Beverleyh]

The gap between the elements is indeed down to the different top values (the absolute positioning is pulling them all out of their natural flow so that they’re no longer “aware” of each other). Ideally you would wrap everything to the right of the image in another container div and do the centralising thing on just that one element – everything inside could then be spaced apart from each other with margins (or flexbox), and their placement would always stay relative to each other inside the new container div (like moving a tupaware container full of fruit to different shelves in your fridge in one go rather than moving individual fruits if there was no container), but unless you can edit the markup of the plugin, your options will be a bit limited. What you’re doing in this case is a bit hacky (moving the fruits individually), but it can do the job… with some fiddling. (BTW – I’m sadly not the best person to comment on the plugin, or WordPress as a whole as I rarely use it. Joomla or “self rolled” code is more up my street. Sorry.)

You should be able to manipulate the top values individually inside different size/breakpoint media queries, if you avoid nesting the media queries (I think this is the conclusion you’ve already come to), but you’ll probably end up doing a fair amount of repetition to make adjustments in successive breakpoint (tweakpoint) increments.

[Atelierbram]

It’s really unfortunate there’s no extra inner wrapper to wrap the text-items on the right. That is the reason flexbox will not work here for vertical positioning, which is a real bummer. The positioning that is going on, with all respect, is bordering on crazy; like digging yourself into a hole while writing a recipe for disaster.

Best option is to use floats here IMO, see the fork of the demo:

https://codepen.io/atelierbram/pen/aWBQLz

BTW, in your original demo in Codepen you can add the external Bootstap styles from the CSS-tab behind the gear icon. There’s also an option there to add a reset.

[claudia7]

Hi Atelierbram,

Thanks for the reply. Unfortunatly I didn’t understood your code and when I pasted it it didnt worked out for me. Did you put some new html classes?

What worked for me was the code that is on codepen, as directed by Beverlehy.

PT Guy, the plugin developer noticed some classes weren’t wrapped in media queries.

This happened because I changed the style.css of the theme before I’ve learned I could do it from the wordpress editor (a newbie error – hope I never forget this), and it was overriding the editor’s code.

It’s fixed now and working.

Thank you both for your time and patience and for helping me learning CSS. This is only my first site as such, so I appreciate you answering my silly questions.

[Author]

Posts