I'd like to buy a license of cssSlider at www.cssslider.com, but I need to get it to work first.
I want a responsive full-width slider. As the browser window decreases in width, I want to keep the slider height intact at first (so only the sides of the slider image will be cut). After a certain breakpoint (when browser window has same width as the width of the content wrapper on my site), only then do I want the slider to get smaller vertically as well. This way, the slider won't get ridiculously thin on smaller devices. I hope I explain myself well.
I managed to do this on my site with a single image used as background, using a transparent .gif with a width of 1120 x 500:
https://www.easterisland.travel/
I know it's possible with cssSlider, since they have this feature on their first page top slider (http://cssslider.com/), but there's no option to choose this with the cssSlider executable program.
Any clues? Thank you!
For smaller screens, they set the container height to auto inside a media query. Then they appear to serve different images based on screen width. So it looks like 'responsive images'.
Responsive images can be complicated depending on whether you care about IE, your server configuration, and whether you know php or javascript, etc etc. Here's some info: https://css-tricks.com/which-responsive-images-solution-should-you-use/
Alternative solution: you could use the newer css3 units of vw and vh.
vw and vh are percentage of the viewport. The browser support for this will be roughly equal to the support for css3 sliders, so you should be ok!
Try replacing their media query, something like this:
#media only screen and (max-width: 800px) {
.csslider1, .csslider1 > ul {
height: 75vh; max-height:450px;
}
}
In the end, I found this to be the correct code:
#media only screen and (max-width: 1500px) {
.csslider1,
.csslider1 > ul {
height: auto;
}
}
I found the cssSlider program to automatically generate the behaviour I was looking for with the right settings. All you need to do is to put the breakpoint you want as image width, with "Full width" checked.
Related
On the docs page of mini.css https://minicss.org/docs#modal-dialogs , there's a modal dialog example. It works, and everything's fine, just the size (width to be precise) of the dialog seems to be constant, regardless of the screen size. It's very short, even on quite wide screens. Is there a way to make it wider (e.g. to take 70% of available space)?
Perhaps the problem is trivial, yet I'm not a CSS expert. I've checked the size of div elements, and they are set to 100%. Just the modal part is rendered so small.
It is using a media query , Override that media query.
media screen and (min-width: 320px)
.card {
max-width: 70%; //try !important tag if does not work without it.
}
Or probably define your own media queries.
My logo has a normal size on the screen like this
and if I change the screen-size of the browser then my logo gets very small.
The logo mustn't have a small size like in the previous pictures. It should be more like in the next picture:
I know there a lots of different themes but is it possible to keep the logo big by smallering the screen?
Most WP themes have pre-set media queries that provide breakpoints to make the site responsive to screen size changes.
You can override these with custom CSS, but I'd find the breakpoint first. Use this tool and then add something like the following to your CSS:
#media screen and (max-width: 400px){
.logo{
width:200px !important;
}
}
This changes the width of the logo when the screen size is 400px or smaller. Change 400px to whatever value the breakpoint is set at. You can edit width or height this way, but there's no need to do both unless you want to.
Edit: ".logo" in the CSS above should be changed to whatever the logo's class is.
I am assuming you are using a theme and did not build this from scratch. Chances are your theme has a responsive image declaration, such as:
.someAwesomeDivName img {
width:100%;
height:auto;
}
and the parent div holding that image is a certain width, which effects the image inside it. Check there first, and go from there.
I have two category blog layout pages on my guitar website. The intro article images are set to "float: left" which makes the design work on devices with either really small screens or if they have larger screens/flipped screens to horizontal mode.
In vertical mode, on large phone screens, the text wraps around the image in an odd way. Here I would prefer if the text simply just skipped to below the image. You can see what I mean here.
The first example is the effect that I'm after, but on iPhone 6 and nexus phones the wrap effect is unwanted.
Is there any way to make this happen using CSS?
I have tried usin the min-width CSS property but it does not have any effect.
Using Joomla vs 3.6.5, protostar template.
I found two solutions:
.pull-left.item-image {
float: none; /* option one */
width: 100%; /* option two */
}
Only float or only width (or both) will solve your problem. But, please note this will affect the image, not only in the mobile view. So you need to play around with the window's width and see what's the maximum height for the change. then, use #media on CSS (lets say you want it to apply for every screen that is thinner than 450px:
#media screen and (max-width: 450px) {
.pull-left.item-image { ... }
}
I want to make a media query to target just my phone. What breakpoint(s) would I use?
For instance, my body max-width is 800px wide with 2px margins. When the window is less than 800px (mobile?) i want the margins on it to be 0px (this works on my browser). Turns out that my phones screen is hi-res and therefore the width of the display never goes below 800px!
Is this because of pixel ratios?
What do I do?
The meta-view-port tag changes how websites are displayed on your phone, or other small screens that may want to 'adjust' a website for you.
Some screens, for instance - an iphone 5 - with no meta-view-port tag, will size the website to fit your screen / but like a little version of your website zoomed out. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
A combination of a view-port tag, and a media-query in your styles would allow you to change your style rules depending on the screen-size. It's kinda best just to make the breaks where things get ugly and not based on the screen sizes of "Today" that will change next month.
I would suggest building from the smallest screen first and moving up as you go with styles like this:
html {
height: 100%;
background: blue;
}
#media (min-width: 400px) {
html {
background: red;
}
}
#media (min-width: 850px) {
html {
background: green;
}
}
etc.
https://jsfiddle.net/5qhmrym5/
If you already have your site built.. and you really want to target the smaller screens, you can use max-width instead of min-width - but I've found that it takes more time and energy to override styles on the way down - then it does on the way up because styles get more complex for larger screens.
#media (max-width: 850px) {
/* styles */
}
If what you want to change is margin value when viewed on mobile you should design your display for use on any screen above the mobile size, 800px wide for you, then create a media query, similar to the ones in the link commented by #Hynes, which changes just margins to 0px.
You are correct in assuming your device is 800px wide due to ratios, but it also has to do with resolution, which are similar topics here. If you imagine a sports jumbo screen, a pixel is nearly an led in size, vs a 1080px display laptop, where the pixels are nearly unobservable. Ratios and resolutions are the reasons displays are tricky to make, and why values such as em's and percentages have come to be, to bypass the differences in display. This is also a large reason of why media queries are so useful
html {
box-sizing: border-box;}
*,*:before,*:after {box-sizing: inherit;}
Try using box-sizing: border-box on your css and also percentages, this is the way I like it, but surely you will find plenty of information about it, just google it.
Found the solution: https://stackoverflow.com/a/18500871/5906166
You need to include this in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
Explanation:
Fortunately, you can specify a viewport meta tag in the <head> section
of your document in order to control the width and scaling of the
browser's viewport. If this tag has a content value of
width=device-width, the screen's width will match the device
independent pixels and will ensure that all the different devices
should scale and behave consistently.
I am stuck on how should I cope with the screen resolution problem ....
If I design for High resolution(1280px wide) a very long horizontal scroll comes up on low resolution monitors
If I design for low resolution the website seems to utilize jus a little space on the browser
please guide me how to get around this problem any help would be appreciated thanks
There are several suggestions...
Design your site to center everything horizontally, along with designing with fixed widths. Then make sure that the most important part of your content stays in the center. Background images can fill the background area without causing a horizontal overflow (the scrollbar being shown).
Use a design that fills 100% horizontally and make placements based on percentage width's. This may be difficult depending on your design but if you use some fixed width aspects from #1 that can help.
Use conditional CSS loads. Only recommend this if you really need very different layouts for different screen sizes (like mobile sites). You can use Javascript to get the document.body.clientWidth and document.body.clientHeight to get the current window size and load something based on this. Remember though... a user can resize the screen so it won't be as great as #1 or #2.
Google for "Responsive Web Design"
U have two choices:
1-Make your layout width about 980px. so that users with 1024 resolution and higher will see all the screen without scroll.
2-Make your layout 100% width. without specifying constant width for your elements in pixel set their width in percent. so that every body with any resolution will see the whole page without scroll bars.
I had this problem before...
CSS can't detect screen size, but Javascript can. I don't remember how, though. But it can tell you what size does the browser window have. Depending of this size, you can then link to a CSS or another.
I always use the rule of designing for the 978px Grid.
#container {
width: 978px;
margin: 0 auto;
}
This means it will fit in browsers down to 1024x768 and display centered in higher resolutions.
screen resolution problem is not solved by any margin , padding ,absolute and relative when it comes in to body element .....
this is one of solution which i can prefer for one of case :
use offset in window resize function to another element from which you want to alignment (offset top and offset left)
example :
$(window).resize(function () {
var p = $("#divfromwhichyouwantalignment"); var offset = p.offset();
$(".element1toalign").offset({ left: offset.left });
$(".element2toalign").offset({ left: offset.top + 350 });
});