I am coming from 1600 X 900 resolution screen.
Everything is not aligning in the horizontal center. Check here.. whats the fix?
the animated color parts get vertically aligned by this flex property:
align-items: center;, but it requires the support of this code:
-webkit-transform: translate(-50%, 100%);
transform: translate(-50%, 100%);
why?
What is the purpose of this code?
.limgone {
max-width: 40%;
}
.limgtwo {
max-width: 55%;
}
.limg {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.row_reverse {
flex-direction: row-reverse;
}
<div class="fcontent shadow">
<div class="limg row_reverse">
<div class="limgone">
<img src="img/_color.png" alt="">
</div>
<div class="limgtwo">
<h1>Seo ready</h1>
<p>
</div>
</div>
</div>
<div class="fcontent whitebg">
<div class="limg">
<div class="limgone">
<img src="img/_color.png" alt="">
</div>
<div class="limgtwo">
<h1>Theme Customizer</h1>
<p>
</div>
</div>
</div>
What do you expect?
I didn’t get your point completely?
You could add to the information provided by including a screenshot of what you see in your browser AND a make-believe screenshot of what you expect to see or would like to see.
The foreground images do not have width=“” and height=“” attributes so we cannot even guess what size they might be, NOR can the web code where the images are not shown because they use a relative URL instead of a universal (full) URL.
I have a hard time following the jumpy “action” in screencasts so they are mostly useless to me.
Your code that I posted will not produce a centered display. So I ask, what do you expect?
I have zoomed the text-only smaller to get more height into this screen shot.
This is what I see. What do you expect me to see and act on?
You are still not getting what is the exact issue. You are focussing on something that is a non-issue, and that is actually not even asked.
the exact thing that I asked I, clearly mentioned and explained it in my first post.
Please post an acceptable screenshot showing what you are describing and another make-believe screenshot showing what you would like to see because as you stated, I don’t get it.
It may be clear to you, but it is less so to others.
Are you saying that you want the space to the left of your animation to be same size as the space to the right of the adjoining paragraph?
(My monitor is only 1280px wide, and the animation extends beyond the lefthand side of the screen; there is no white space.)
Actually, what I wanted is →
<div class="limgone">
</div>
Everything that was there in between the above div should be horizontally centered, which is not happening now.
The reason for which is shown in the code that I posted in #2. Unless there is a media query that is not taking effect.
Post #6 is a request for useful information. Please do not ignore it.
Give me some time, please. Feeling a bit nervous, and exhausted by so many things that happened today. I will get back to the post soon.
Hi,
When things don’t look centred the first thing to do is to colour the backgrounds of the elements so that you can see where things actually lie. As soon as you do that you will see that the main containers are centred exactly as they should be.
However the content inside has no real rules to centre them as they are extra divs inside a centred container so although the parent may be aligned the content just sits at the top.
A major issue in your code is that your triangle is absolutely place so you will not be able to center it with flex box anyway. and you have the wrong widths for the container as the triangle is obviously much bigger than 50px.
The left column has no intrinsic width because the content is absolutely placed and therefore nothing to center vertically or horizontally. You also have max-widths applied which stop the content reaching the edges of the container and even if it did you have set space-around so there would be gaps around if that rule was ever to apply.
Add the following rules which have backgrounds and over-rides applied and will show you where everything is. The triangle can only be positioned by manually moving it to the center (using transforms in this case).
Study the containers by looking at the background colours and you can see that everything is doing as you told it. remember that if you add more divs inside centred items then those items would need rules to change their alignment.
This should get you close to what you want although I’ve guessed a little at the widths of the triangles overall.
.whitebg {
background:red;
}
.limg {
background:blue;
}
.limgtwo {
max-width:none;
flex:1 0 0;
background:pink;
}
.limgone {
flex:0 0 300px;
max-width:none;
display:flex;
justify-content:center;
background:orange;
}
.tri {
position:relative;
width:250px;
height:250px;
background:yellow;
transform:none;
top:0;
left:0;
}
.tri .side:nth-child(1) {
transform:translate(0, 175px);
}
.tri .side:nth-child(2) {
transform:translate(100px, 20px);
}
.tri .side:nth-child(3) {
transform:translate(200px, 175px);
}
Remove the background colours once you have everything where it needs to be.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
