Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 days ago.
Improve this question
Id like to achieve this effect with any text/phrase.
(effect achieved on Figma)
example image
example 2
as you can see, in the examples the phrase is wrapped always with the largest part in the bottom.
as if I added a <br>: <h2>Black Panther:<BR>Wakanda Forever</h2>
or any other long movie text:
<h2>this is a movie<br>With a really looooong text</h2>
but I can't find a way to do it with css, this is what I can only get: the largest text is always on top.
example 3
like a regular text alignment, where the longest part of the whole title is on top:
this goes against my design as you can see.
Is there any way to solve it with css. I'm trying to avoid using JS for that detail.
I'll get movies titles from an API and adding a <BR> I think is not possible due to each title could be different lengths.
this is the code, is just an h2:
`<h2 class="featured-movie-title">The Black Parter: Wakanda Forever</h2>`
```.featured-movie-title{
display:flex;
justify-content: flex-end;
align-content: flex-end;
max-width: 35rem;
height: 7.8rem;
font-size: 3.2rem;
font-family: 'Magra', sans-serif;
text-align-last: right;
color: var(--white);
}
```
You will need to use <br/> to split the words on separate lines.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 months ago.
Improve this question
enter image description here
I need some space after the last card so please help me with that.
With the limited amount I can see I would guess that you should be using display flex. Something like this
div.glowingBoxesContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div.glowingBoxesContainer div.glowingBox{
width: calc(33.33% - 30px); //this will take into consideration margins
margin: 15px;
min-width: 300px;//this will force it to wrap if 33% is smaller than 300px
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I'm modifying a Shopify template but my CSS knowledge is limited and I'm stuck with this problem for hours already.
When I put margin: 3rem 0; in .slick-slider, it works but whenever the page loads, the card stacks jump to new positions.
When I put margin: 3rem 0; in .featured-products, the card stacks stay in their positions but the glow is stopped like the first photo. Also, the titles disappear when I put top: -30px; into .widget-title.
I really appreciate if you could show me how to make it work!
You're looking for padding, not margin.
I navigated to your sign and used the login credentials you provided, added some padding-top to the cards in the chrome dev tools, and the glow had more room at the top.
Specifically:
.grid-item {
padding-top: 3rem;
}
Here, .grid-item refers to the children of .products-grid.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am stuck on a CSS issue for a while. I searched other posts, but I still didn't find a solution.
As shown in the screenshot below, I want to expand the grey date bar to the left most. However, there is a div on the left as shown in the green area. I tried to set the width:100%, but it cannot cover the left green areas.
Screenshot for the problem
There is also a solution to use transform: scale(1.5, 1), but this will change the shapes of the date words and number which make them look bad.
Can I get some help to extend the date bar?
CSS for date bar:
display: flex;
justify-content: center;
background: #ebedee;
width: 100%;
border: none;
Thanks #Luca Neri.
The solution is to set:
width: calc(100% + 109px);
position: absolute;
left: -97px;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm creating a page where a user can input a random comment and it should display the comment below. (as seen below)
The problem I have is that I want to make all the boxes fit within the page. For example, the longer strings should move to a new line and be replaced with shorter strings, etc.
At the moment I have each output as a <span> whilst I test.
Any help will be appreciated!
You can use white-space: nowrap;.
Demo:
div {
display: inline-block;
white-space: nowrap;
margin: 5px;
padding: 5px 10px;
border-radius: 3px;
border: 1px solid #333;
}
<div>
Content goes here.
</div>
<div>
Content goes here.
</div>
<div>
Content goes here. Content goes here. Content goes here.
</div>
<div>
Content goes here.
</div>
As far as re-ordering the elements to fill the gaps, you might need JavaScript.
You can do this with CSS, simpy by using display condition.
.classname {display:inline-block;}
You can also use block if you want every element to take a whole line instead.
.classname {display:block;}
I think you should make each div holding the comment to display : block and then set it's maxi-width: 100%. I think it should work fine. Note: this would have been a comment, but i can't make This would make enough space for the text and if text exceed the div, a new line would appear.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am working on a beginner project as I am new into web dev/design and am trying to center these images. I've included a link with screenshots of my code and the webpage in Firefox.
What normally works if your images are not wrapped in another div.
.grid {
margin:0 auto; // Shortcut for margin-left:auto and margin-right: auto
width: 1000px;
text-align: center;
}
What it does is align all of the contents to the center of the div.
However since all of your images are wrapped in another element they will not center depending on your styling of container elements.
What i would say is the best way to approach your issue:
http://jsfiddle.net/c0oku4zu/2/