I'm making my own portfolio using materialize CSS framework and is having some issues. I'm trying to accomplish something like this:
As you can see, the images are properly aligned along with the captions below them, and what I have accomplished so far is this:
How can I possibly do that with materialize css? You can check out the fiddle here: https://jsfiddle.net/uj0ykqpq/1/
Any help would be much appreciated. Thanks!
You can assign a fixed height for the images and to align the captions, use text-align: center I have added a new class so that it doesn't affect other images in card panels.
.technologies .col img {
height: 100px;
}
.technologies .col {
text-align: center;
}
Updated JSfiddle
Related
I am using the reality wordpress theme, I am trying to display the actual image which is center focused in theme
Look this I have modified the css to
.iwp-property-gallery-slider-v1 .owl-item figure img {
position: relative;
width: auto;
max-width: 800px;
}
Here images are coming with extra white space at each end of the items. Any help would be highly appreciated.
autowidth isn't something that you can control with the css.
You need to enable it in the js with autoWidth:true
Check Documentation Here
I've seen a post on stack overflow kind of answering my question (How to center mat-card in angular materials?)
but the result is really not perfect (see image).
As you can see, the cards get squished, and they're on the same line. No matter the scss I add to the cards, it doesn't affect them. I'd like them to be much bigger, and one on top of the other.
I find it incredible that scss options are not simpler to move your elements where you want...
Add center class to mat-card tag and put below css.
.center {
top : 20%;
height: 40%;
width : 40%;
margin: 0 auto;
display: flex;
}
If this is not apply in scss file then put ::ng-deep just prefix of .center
I tried the answer given in the How to center mat-card in angular materials?, it works
Stackblitz
In my previous question I asked a similar question but was using the bootstrap framework. I want to be able to create a responsive page without using bootstrap because I don't really like the grid system.
I have two divs that are centered horizontally and vertically. I would like for it to be responsive and stack up on top of each other when the window is minimized. My code on CodePen. I've attempted it a few times and I still not sure how to approach it:
#media only screen and (max-width: 768px){
#about #aboutInfo{
border: solid;
float:none;
text-align: center;
width: 100%;
}
#about #aboutInfo{
float: none;
width: 100%;
}
}
I've already solved your problem in the previous post but ok. First of all, I advise you to stop using floats because floats are history and float: none; does nothing because by default elements don't float like you have it written in your codepen. Second, I recommend you to take a closer look at Flexbox and the possibilities it brings because it really shines when it comes to responsive web design/development.
So again, solve the problem by adding the below code to your media queries:
#about {
flex-direction: column;
}
And also like I told you before it's always good to use some basic CSS browser reset:
* {margin: 0; padding: 0; box-sizing: border-box}
If I understand you right, you should add
flex-flow: row wrap;
or
flex-wrap: wrap;
in #about.
The reason it's not stacking is because you're separating your content with div tags. Make the section a col and style them like here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
In bootstrap, there is a row tag that acts like a div tag. But each of the columns are litterally "col-**" with styling behind them.
Hey guys i have a HTML/CSS related question here...
I'm developing on a salesforce application, which makes me use this apex tag to put images in and I'm not really comfortable with using them. I am making print layouts at the moment for some forms that i've created. Everything worked fine until i had 2 images that i needed to style differently. I have 1 image in the header and 1 image that is a box within the form. Since i am styling the image in the header with some padding and centering among other stuff...the other box image wont show up as i go to print. So i was wondering if i can just separate the header image via a div tag. Here is what i have so far....
HTML:
<div class="logo_print"></div>
CSS:
.logo_print{
float:left;
padding-left: 40px;
width: 64px;
height: 86px;
background-image:url('../css_images/seal2.png');
}
So this is the header image i put in a div tag...did not work but if anyone has any thoughts/solutions that would be great....been trying out a bunch of diff ways with no progress. Thanks
EDIT:
So I've put new CSS in with some recommendations..so now i see it on my website but when i go to print the forms...the image does not show up :/
OH and i am using #media print to put the CSS in
Reason it's not working is because you haven't specified a height and width in your css.
Try This:
.logo {
background-image: url('http://pixelative.co/wp-content/uploads/2014/06/logo2.png');
width: 209px;
height: 52px;
}
<div class="logo"></div>
Here's a codepen of the working example.
Hope this answers your question.
I've been reading various posts on stackoverflow and a few other sites about centering images. I found this code on various sites that seems to be a general guide:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
I am trying to center an image. I can't center it with this code. I can make it move using text-align: center but read this isn't the best method of doing so. I made a jsfiddle. If anyone wouldn't mind helping me it would be appreciated. I was able to make the image move as well by adding a random width value. I don't think this is the right approach though either since I am eyeballing if it is centered or not.
Sorry, I couldn't get the actual image to display but the img logo is there as a placeholder: jsFiddle
Your code should work just fine. There's probably something more you're not showing us. Here's a demo of two methods, though.
Basically, if the img is display: block; you can use margin: 0 auto.
If it's display: inline (the default for an img tag) the parent element would need text-align: center; on it.
Here's some code to summarize: http://jsbin.com/upuzav/1/edit
I would assign your image a class rather that trying to center all images with html. This way if you want to change where its positioned, you can quickly, rather that adjusting all things with the img tag.
CSS:
.center_image {
display: block;
margin-left: auto;
margin-right: auto }
Your Image:
<img src="your_image.jpg" class="center_image">
In order for this trick to work the image must have an explicit width. See http://designshack.net/articles/css/how-to-center-anything-with-css/