I want to style responsive images in MediaWiki. (I am running mediawiki 1.34.1 and I have the TemplateStyles extension installed.) Some Googling lead me to create a Template:ResponsiveImage like:
<templatestyles src="ResponsiveImage/style.css" />
<div class="responsive-image">
{{{1}}}
</div>
with a style sheet Template:ResponsiveImage/style.css like:
/* To make images responsive */
.responsive-image img {
max-width:100%;
height:auto;
}
So far so good. I can do {{ResponsiveImage|[[File:some image.png]]}} and it fits across the full screen width and shrinks with the screen size.
But it would be neat to be able to pass max-width to give other responsive width images, but I can't find any documentation or examples of how to do it. I've tried the obvious - max-width:{{{1}}}; - but just get an error
Invalid or unsupported value for property
max-width
at line 3 character 12.
Is there some way to do this?
Related
I simply want to reduce desktop view width slightly but can't get it to work with media query. My latest attempt is
#media (min-width: 992px) and (max-width: 1199.98px) {
html, body {
max-width: 80%;
}
}
but it has no affect. I don't think I want to mess with container b/c that would leave out the navbar. Using my own stylesheet (added below bootstrap cdn stuff) rather than using the media queries directly in template.html but I don't know if that makes any difference. Am I trying to do this the right way or am I completely missing something?
You don't want go banging around on high-level elements when using a layout library. This limits what you and others can do in the page later (say you want a full-width banner somewhere). You also probably don't want to casually override all instances of a Bootstrap class.
In this case, look at adding a custom class to the .container or .container-fluid element, limiting its width:
.container.narrow {
max-width: 80%;
}
Use that for any containers where you want a narrower width, and use containers without that class for wider content.
<div class="container narrow"> ... </div>
Whether you apply this in a media query is probably immaterial.
I was strugglng to find the answer to my screen not working correctly for the mobile and below answer from you worked like a charm. Thanks so much for your answer. I removed the meta-name line and it worked like a charm.
Mohan
#Beanic
I presume that you have added the viewport tag for that() –
Jan 22, 2020 at 12:50
I am trying to add multiple images to a page using CSS. I am doing it this way rather than in a more 'straight forward' way to ensure mobile compatibility (it allows me to set percentage widths for the images which allows me to get them to display at the right size on mobile).
I currently have in my stylesheet:
div.image {
content:url(http://example.com/example-image1.jpg);
width:100%
}
div.image2 {
content:url(http://example.com/example-image2.jpg);
width:25%
}
and then a few more images. And then in certain parts of my page:
<div class="image">
</div>
<div class="image2">
</div>
The problem I am getting is content:url only seems to be working in the first instance, that is the only picture that displays. It doesn't seem to be a problem with multiple div.s as if I set the 2nd div to the same content:url image as the first div, that image does actually display twice.
Sorry if this is a dumb/noob question...I just couldn't find an answer.
You forgot a bracket :
div.image2{
content:url(http://example.com/example-image2.jpg);
width:25%
}
EDIT: I tried with the bracket and it worked. I use Mozilla Firefox version 58.
I have my course book as html parts chapter-by-chapter. I have done some modifies on it. It seems very well when it is read on webpage but when I want to convert it to pdf or print it it seems narrow. The issue is that how the page can be fitted in A4. If you look at output.pdf which can be found on main page. Besides, the shared links for you understand me. (especially page 47). I can merge them just in a pdf file. I think that if the css can be edited, it will be fitted in A4 and seems in pdf like a book. I need your helps. As an example you can look at ch18.html and ch19.pdf I can't write other links because of reputation. But all files can be looked from main page.
Pages: http://bookfiles.host-ed.me/ch18.html and ch19.html
Css file: http://bookfiles.host-ed.me/static/CACHE/css/ab0ffefbadc3.css
I absolutetly newbie about css. Thank for your helps.
The issue appears to be with your max-width on your "document" div. You have it set at several different places in your css file based on the screen size. I would go through them one by one and find the one that is affecting your print file. You need to set your max-width to 100%. Having a max-width less than 100% is what is causing it to print narrow.
Once you identify which one is causing the problem, you can add a new style that only goes into affect when you print.
Add this to your CSS file, for example:
#media print and (color){
#lesson-fragment, [role="document"] {
width: 100%;
max-width: 100%;
}
}
You can also put other specific print styles inside of the #media print code. Like if you wanted to change the font size or color only when it printed.
So, I downloaded a free website template. I modified the layout a little and now I'm having problems getting the top location icons to become smaller and position themselves all in one straight line. I've tried changing the "image image-full" tag in the CSS file from 100% to a smaller percentage. That makes the icon smaller but then the icons won't position themselves to be all on one line. The site is found at http://harmlesscrack.com/br/. I've torn apart this CSS file changing everything I can find that links to the location icons and just about given up on all hope of understanding how they formatted this CSS.
P.S. Please don't flag this for "not being a useful question.' I really do need help here.
Just explicitly set the widths of the <div class="4u">, or alter the .\34 u class. For example, the following will place the 4 containers in-a-row spanning only one line:
// HTML markup
<div class="4u">
...
</div>
// CSS
.\34 u {
width: 24.333333%;
}
I'm developing a small vCards website. I'm using the Twitter Bootstrap LESS files as a base for the responsiveness and the grid.
I had an issue before, the grid wasn't responsive (Stack Overflow question) and based on the answer I realized that I had to include the responsive.less file together with the bootstrap.less file in order to get the responsive features.
After having fixed that issue, I still get more weird behavior:
<div class="headline-container pull-left">
<div class="headline-inner">
<h1>Roland Groza</h1>
<h4>Frontend Developer</h4>
</div>
</div>
Inspect the DOM and look for the above markup. Now if you start resizing the window down to the least it can go, between 410px and 514px, you will notice that the markup will inherit some CSS that is supposed to be applied for the MQ rule #media (max-width: 480px) { }, but just a part of it, as Twitter Bootstrap also has some CSS for that rule which is only applied when going beyond 410px and not above.
Did someone encounter the same behavior before, and if so is there a fix for it?
EDIT : The CSS changes that you should look for is the font sizes and margin / padding on the headline :
<h1>Roland Groza</h1>
<h4>< Frontend Developer /></h4>
The above text will be the one which behaves a bit weird.
If you are talking about the <h1> heading not being responsive, you can use slabText or fix it with an wrapper.
your html is not what you post , it is
<figcaption class="headline-container">
<div class="headline-inner">
<h1>Roland Groza</h1>
<h4>< Frontend Developer /></h4>
</div>
</figcaption>
And I can't see any query that states 410px (the one you say should be applied when "going betond 410px ")
Can you comment what is the rule that should be applied and isn't ?