Experts,
I have a page containing thumbnails:
http://ulrichbangert.de/heimat/Bad_Harzburg_Oldtimertreffen/2015-04-05_Bad_Harzburg_Oldtimertreffen.php
My intention is to reduce the size of the thumbs to 50% for a small screen so that more of them fit on the screen. I already have a solution by JS but would like to use CSS instead. My latest approach uses scale:
CSS:
#media only screen and (max-width: 768px) {
a.th200 {
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
display: inline-block;
}
}
HTML:
<img class="th200" src="2015-04-05_Bad_Harzburg_Oldtimertreffen_01_th200.jpg" alt="Oldtimertreffen in Bad Harzburg">
Scaling down works fine so far as Firebug indicates but there is a lot of space between the thumbnails so that the disired effect is not achieved. What causes this empty space? How can I remove it?
I would use a DIV as a container and then a DIV for each thumbnail, and scale the thumbnail DIVs down. If the images inside are 100% the size of the DIV then they will scale down with it. This will eliminate the spaces you are seeing at the moment.
Related
Currently having issues scaling the text down to a mobile size, as the current parallax image has a text element on top of it and half the text is off screen when browser is resized or on a mobile device. I can move the text around, but struggling to resize it to fit on a mobile screen.
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 {
font-size: 1% !important;
margin-left: -300px !important;
(.vc_custom is the element name)
Page in question- https://www.xordium.co.uk/your-cloud-journey/
Yes, You can New fonts properties are there please see the link below
https://css-tricks.com/viewport-sized-typography/
First of all, your css rule is not applied to the text in the header. See this image. Try to select directly the span:
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 span {
font-size:...
Or any other method.
Next, you should use Viewport Sized Typography for better and more accurate reponsivity. For example:
#media only screen and (max-width: 600px) {
.vc_custom_1528382333513 span {
font-size:6vw;
...
The result should look like this.
Not the best look, I know, but try some other numbers until you find something that fits correctly.
Try using other units. eg viewport width.
Try setting the text to eg. calc(16px + 2vw);
Play around with the pixels or viewport width values until you find a solution that scales however you'd like.
check this CSS Tricks article Fun with Viewport Units.
Also check out the CSS calc function. Its quite useful A Couple of Use Cases for Calc()
I designed a responsive web page for tutorial and I have a trouble with unnecessary padding.
http://zinzinzibidi.com/res
In this page when you decrease the your browser window resolution, you will see the horizontal scroll bar (overflow-x) in some resolutions. I am trying to understand but I can't fix this trouble for a few days.
Here is an example picture of my trouble:
My CSS codes here: http://zinzinzibidi.com/Areas/res/Content/css/style.css
My media screen codes are
What am I doing wrong?
It appears that an inner item is causing the issue. Remove the padding from #header-main-buffer and it should go away.
line 515 of your file:
#header-main-buffer {
width: 300px;
padding: 0 10px; <- this is your problem. remove it and it will be fixed
...
I checked your code and it might be your <div id="header-logo"> the one creating that extra padding.
Since the img has a fixed width of 300px on screens smaller than tit will create an extra padding to the right so it fits the screen.
Try reducing the
#media screen and (max-width: 479px) and (min-width: 320px) {
#header-container {
width:;
}
}
EDIT
Basically check all the img that you're using so you make sure their width is appropriate and they fit the screen.
I have an image in my footer with width:1363px and height: 100px. This looks fine on my desktop computer with resolution 1366*768 but when I check the site with resolution 1024*768 the size of the image is not shrinking.
So my question is how do I adjust the size of the image according to screen size using css. I used media queries and changed the width and height of image but it still remains the same. I also tried some other tricks with no luck.
You can simply set the image to width: 100% and it will scale with the browser.
Demo JS Fiddle
HTML
<div id="footer">
<img src="~/yourimage.jpg" />
</div>
CSS
#footer img{
width: 100%;
}
Without seeing your image, it's difficult to advise, but an alternative is to not use a full width image and use a background colour instead:
Demo JS Fiddle
Or use a horizontally repeating image:
Demo JS Fiddle
Try
img{width: 100%; max-width: 1363px;}
This should shrink the image down with the size of the browser, but won't distort the image on resolutions higher than it's maximum width.
You can use css bootstrap responsive for this.
http://getbootstrap.com/css/
It shrinks the contents of your div according to screen size.
But if you want to do it manually, set width of footer content to (example)
width:100%
Then set a specific size for footer (example)
width:1024px
After that use #media queries
http://css-tricks.com/css-media-queries/
Example
#media all and (max-width: 1024px) and (min-width: 768px){
#footer{
width:800px; //or something like this
}
}
you put that image in container tag and after that give a width t0 that image and make height auto of that image.
I have a website where when the screen goes above 1400px; the website no longer expands. However, I also have a floating element. the navbar is floated to the left and scales down in size with the page. However, I don't wamt it to style if the screen size gets larger.
If someone views my page above 1400px screen resolution it works and does not move. However, if someone views the website and zooms out increasing the viewport size not the screen size it stays stuck to the left hand side and distorts.
I want a div to display:none if the screen size or the viewport size reaches a maximum size of 1400px;
I need compatibility for modern browsers and mobile devices.
you can try this...
#media screen and (max-width: 1400px){
div {
display:none;
}
}
#media (min-width: 1400px) {
body {
background:red !important;
}
}
works for me :)
EDIT: sorry missed the part about zooming the page. i'm not sure viewport is supposed to work like that?
I have a wrapper div which wraps the header of my page like below:
<div id="wrapper">
<div id="centered_slideshow">
// Slideshow here, covering approx 75% of screen width...
</div>
</div>
#wrapper{
width:100%;
min-width:980px;
background:#000 url(../graphics/header_wrapper_bgr_left.jpg) no-repeat bottom left;
}
#centered_slideshow{
margin:0 auto; //for centering the div inside the wrapper
}
Now the entire website looks great in mobile devices, except for this one background image.
The mobile device has a significantly smaller width. This results in the background image beeing "moved" into the bottom left of the mobile screen, and since the slideshow is in the middle of the screen it partly overlaps the slideshow. ie the background image overlaps the slideshow, which is my problem.
How can I make the image not beeing shown in mobile devices, alt making the background image not move at all when the screen width gets smaller (as in mobile devices)?
If you need more input let me know.
You could use a media query to check the screen size and then serve the mobile device with a different background. So something like
#media screen and (max-width: 480px) {
#wrapper{
width:100%;
background-image:none;
}
}
More on media queries here: http://www.w3.org/TR/css3-mediaqueries/
You could also use jQuery to do this, but I would advise this only if you are already using jQuery for the site. (Best not to overload the user with too many script downloads.) In this case,
if (screen.width<480){
$('#wrapper').css('background-image','none');
}