I have created a news section in the website. Each row contains 4 news cards. Somehow it is not behaving as it should. So can you help me to solve this issue.
Website Link: http://www.shmgroup.com/news.php
I am not able to share the code. Please inspect it.
The problem is with the varying height of the image and the text content. I have updated the site with the below CSS changes.
* Added fixed height to the image instead of width and aligned it in the center.
* Added 3 line clipping to the text description and added a min height.
.news-thumbnail img {
max-width: 100%;
height: 200px;
display: inline;
}
.news-thumbnail {
margin: 10px;
text-align: center;
}
.news-excert p {
font-size: 14px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 60px;
}
Remove div with class clearfix and add fix height to element
.news-post-container {
min-height: 500px; // example
}
This issue arise because your news cards are not in a same height. You can add min-height for news-post-container class.
.news-post-container {
min-height: 450px;
}
Remove clearfix classes.
Hope now news page will work properly.
remove clearfix classes
Related
When using the anchor tag to go a specific id on my page, i encountered a problem, when i click the link the text is hidden behind my Navbar.
I cant just add more padding or margin as it would destroy my design.
is there a way to implement some form of offset?
<h1 id="text">Text</h1>
Just take the time and find the solution yourself. There are countless options from CSS to JS, but here are some that you can give a try.
Easiest solution:
#text {
padding-top: 50px; /*height of your navbar*/
margin-top: -50px;
}
Another solution, taken from here, #LGT:
html {
height: calc(100vh - 84px); /* Fix the height. The 84px here is the height of your nav. */
margin-top: 84px;
overflow: hidden; /* Don't scroll. */
}
body {
height: 100%; /* Set the height to that of html. */
overflow-y: auto; /* Draw a vertical scrollbar when needed. */
}
Another solution:
#text:target {
padding-top: 50px; /*height of your navbar*/
}
/*:taget pseudo class is used when user accesses the selected tag using href*/
I have code to center my images (and eventually videos) like I want inside a div, but I am trying to get the images to stack vertically in a column.
It works if the space is confined enough, but I want it to work all the time. What can I do? Here is my codepen:
div{
margin: 0 auto;
height: 100vh;
text-align: center;
overflow: hidden;
max-width: 172vh;
}
img{
height: 50%;
}
https://codepen.io/thejaredmosley/pen/OJPVqBa
try below:
div {
....
display: flex;
flex-direction: column;
}
You can simply do it with the display:block CSS property.
https://www.w3schools.com/cssref/pr_class_display.asp
Give this CSS to your image and your image will get full-width space and will come in a stack.
So for Image, add this property:
img{
display:block;
}
I'm attempting to create a "bookshelf" using html and sass (Note: this is heavily based on http://ameijer.nl/2013/03/bookshelf-css-only/) You can see my version of the concept here:
https://mainstringargs.github.io/bookshelf.html
I'm trying to only show the horizontal scrollbar when necessary for the particular "bookshelf" -- for example, in the "Read" shelf above -- but not have it appear when not necessary -- see "Reading" & "On Deck" at the link.
I expected using "overflow: auto;" would give me this effect, but that seems to cause the scrollbar to always appear.
The relevant sass file is here: https://github.com/mainstringargs/mainstringargs.github.io/blob/master/src/styles/_bookshelf.scss
How can I only show the horizontal scrollbar when needed for each particular bookshelf?
As an example, it currently looks like this with horizontal scrollbars on both displayed bookshelfs even when not enough books:
I want it to look like this mockup (Note the bottom bookshelf has no horizontal scrollbar because there aren't enough books there, but the top one does because there are enough books to scroll):
You can use flexbox and let .books overflow vs .shelf just be sure to remove the width: 1470px; from .books, .shelf:after:
.shelf {
height:auto;
overflow: hidden;
padding: 0;
}
.books {
position: relative;
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
overflow: auto;
align-items:flex-start;
justify-content: flex-start;
height: 420px;
z-index: 1;
}
.books, .shelf:after {
/* width: 1470px; */
box-sizing: border-box;
padding: 40px 30px;
margin: 0;
width: 100%;
}
.book {
flex-shrink: 0;
}
By looking at your code if you only want to apply a horizontal scroll when necessary and not vertically.
Use the following on your class name:
.books {
overflow-x: auto; // Auto horizontal
overflow-y: hidden; // Disable vertical scrolling
}
Try that see if it works. No need to add scroll but let the browser decide with the "auto" set.
I need to align some buttons no matter how the content of previous elements changes. This is the markup that I currently have.
I currently have the buttons at the bottom not aligned as shown in the following image:
Notice that the buttons REQUEST DEMO are not properly aligned, so what I want is no matter the content in the previous p element is, they are aligned as shown in the following image:
Notice that here I used the same text to make it look aligned, but I want the buttons to be aligned no matter what the content of the text is.
I also need this functionality to be responsive since I am using bootstrap and for smaller screens, it shows two elements or one element per line.
I was thinking to add a min-height or max-height in the CSS, but this hasn't solved my problem.
Add this to your code and see if this is what you are looking for.
Documentation for flexbox
.row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.col-md-6 {
flex: 1;
margin-right: 10px;
padding: 50px;
}
.btn {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
There's a few ways to do this. The easiest way would be using flexbox, here's a snippet example https://codepen.io/imohkay/pen/gpard
.parent {
display: flex;
justify-content: space-between;
}
Another way you could do it is having a fixed height for every column, and absolute position the button to the bottom and maybe add some padding to the content so the text never overlaps the button.
Add this class .btn-boxto the buttons and and this class .padbot to the box
CSS
.btn-box{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%)
}
.padbot{
padding-bottom: 80px; // Adjust as your needs
}
DEMO HERE
I currently have a simple header, main, footer structure in my angular project and would like to make the main-component a flex-box in order to arrange all given components horizontally with equal width. Additionally I want to change the flex-direction, when the screen width is lower than 700px to column.
Since I already achieved this with pure HTML + CSS (see jsfiddle: http://jsfiddle.net/aJPw7/443/) I have the feeling that this has something to do with angular parent components.
Expected behaviour: The two <app-content-section> elements each take 50% width of the <app-main-component> and 100% height. When I change the flex-direction to column they should have 100% width and 50% height:
Currrent behaviour: The <app-content-section> elements align when I use "justify-content" but are not influenced by any hight or width attributes.
Style.css
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
app-root HTML:
<app-main-component>
<app-content-section></app-content-section>
<app-content-section></app-content-section>
</app-main-component>
app-main-component HTML:
<div class="main-component">
<ng-content></ng-content>
</div>
app-main-component CSS:
.main-component {
display: flex;
flex-direction: row;
height: 100%;
}
#media screen and (max-width: 700px) {
.main-component {
flex-direction: column;
}
}
app-content-section HTML:
<div class="content-section">
<a>Test</a>
</div>
app-content-section CSS:
.content-section {
width: 100%;
height: 100%;
}
Edit1: I also tried :host{ } but still no luck.
Edit2: I created another jsfiddle where I achieved the correct width, by styling the host-element and adding flex: 1, but elements still won´t use the whole height. https://jsfiddle.net/1c15q243/19/
So the correct answer is adding a :host{ flex: 1; } in the "app-content-section CSS" in order to give its hosting-component <app-content-section> the correct flex-sizing.
I figured it out in the fiddle of my second edit, but #karthikaruna pointed out that I forgot to add HTML- tag in the stylig file.
Set 100% height to html. Here is the updated fiddle.