How do I make all images align to top, not the middle? Also how do I adjust the position of the caption? For example to align it to the top left corner.
The images are center aligned by CSS with the !important Flag asigned.
you could either:
donwload a developement version, and change the css,
Apply a new css after loading the fotorama.css, also use the important flag
overwrite the css rule with javascript with the style.setProperty method
(note, you have to use this method on every image using the fotorama api
$(".fotorama").on("fotorama:show",function(){......})
the caption can be easily modified just by css with the class fotorama__caption - for example:
.fotorama__caption{
top:1%;
left: 2%;
font-size: 200%;
}
Related
I'm a beginner of Wagtail, and trying to follow the tutorial to build a blog website.
The question I have is about RichTextField, inserting an image in the editor, and I have chosen the "Full Width" format, expecting the image should be centered (as said in the doc).
However it's not centered, as shown in the picture below.
What's wrong?
The docs don't say anything about the image being centred. On the contrary, the developer docs say:
The CSS classes added to images do not come with any accompanying stylesheets, or inline styles. e.g. the left class will do nothing, by default. The developer is expected to add these classes to their front end CSS files, to define exactly what they want left, right or full-width to mean.
So, to centre the image, you could define a CSS rule such as:
img.full-width {
display: block;
margin: auto;
}
Default Material Design gives a sidenav width of 304px. I am trying to implement material design's use of flex boxes, by adding in a flex="66" attribute inside the md-sidenav element.
When I did, it shortened the sidenav vertically, instead of horizontally.
It seems like I'm unable to override that 304px without pure CSS, which, although I can accomplish, is something I was specifically hoping to stay away from.
I haven't seen this concept referred to in the Material Design documentation. Anyone else have this issue?
If you will look at angular-material.css as below
md-sidenav is displayed as
display : none
when its closed & its displayed as
display : flex
when its visible.
If you want to change its width you need to write below lines in yr custom.css which you should load after loading angular-material.css
width : 500px !important;
min-width : 500px !important;
max-width : 500px !important;
replace 500 with yr custom value.
I am using Bootstrap 3 with the following sticky footer from http://getbootstrap.com/examples/sticky-footer/
I set the #footer to min-height: 420px; so it will work responsively and adapt to narrow width and expand in height and stack the column boxes. This works just fine.
But when setting a min-height the footer will cover the content in top of it.
Is there a solution to this so the footer will be "pressed" down?
This feature works by also setting a bottom margin on the body to offset the size of the footer.
For instance, sticky-footer.css contains:
body {
margin-bottom: 60px;
}
You'll need to adjust it to the height of your #footer.
I'm using AngularJS and Bootstrap 2.3.2. Right now, it appears bootstrap has a max-height set to 400px. I'd like to allow the content of the dialog to stretch the dialog up to 90% of the window. How can I do this?
When using bootstrap, I like to overwrite some of it with my own CSS. So I would find the CSS selector in the bootstrap.css file that sets the max-height to 400px. Then use that same selector in your own stylesheet (linked below the bootstrap css so that it overwrites it) to set the max-height to 90%.
Edit: the css selector you're looking for is
.modal-body {}
I'm creating a responsive site with a gallery composed of fluids images . For this, I must use css img {max-width: 100%;}. I also want a fade effect on hover.
Does anyone have a solution to this?
So far, all the solutions I've tried, does'nt work with css img {max-width: 100%;}
Thank you very much for your help!
Define image width also along with its max-width. And it must be in pixels or em's.
You don't need to keep max-width or min-width in %'s.
Browser renders from its original width or height value. As
This is for example.
img{
width:50%;
height:30%;
max-width:300px;
min-height:100px;
}
And every images'll be flexible with viewport.