Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I need to add a carousel on web site that shows various number of slides depending on screen width e.g. if the screen is 1920px width it will show 7 items, if width is 980px - 4 items etc. I guess there are plenty of jquery plugins which can do that. One more thing though - when sreen width is small and it can contain only one item - I need the carousel to stop being a carousel and just stack items one under another. What is better way to do that?
You could do this with CSS:
#media only screen and (min-width: 768px) and (max-width: 959px) {
/* do stuff for big screens*/
.small-screen-carousel{
display:none;
}
.big-screen-carousel{
display:block;
}
}
#media only screen and (min-width: 480px) and (max-width: 767px) {
/* do stuff for medium screens*/
}
#media only screen and (min-width: 80px) and (max-width: 479px) {
/* do stuff for samll screens*/
.small-screen-carousel{
display:block;
}
.big-screen-carousel{
display:none;
}
}
I faced same problem and I changed plugin and used elastislide it is exactly works like what you need http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/
Related
I am pretty new to html, js, and css. I was wondering if just. like in IOS development where auto layout is needed for different screen sizes and/or orientations if this is the case for developing a website. I've looked around and seen things like margins and auto, but I'm not sure. Is there any specific links or videos one could suggest to understand this concept so that no matter how the screen size is the contents on board will adjust. Thank you.
use media queries like this :
#media only screen and (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) and (max-height: 1367px) {
.header { width: 90%; }
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Sorry for the noob question.I've bought a template in order to practice and I have the next situation.
I'm trying to obtain a centered logo for mobile device and I simply can not figure what is the problem.
I've uploaded the code on a domain: http://digitalicus.com/ to simplify the process of explaining.
Any advice's are much appreciated.
Vlad
with this css your can align your logo to center:
#media screen and (max-width: 767px) {
.header-content-one .d-flex {
display: flex;
justify-content: center;
}
.header-content-one .d-flex a{
width: 100%;
}
}
I've setted up a breakpoint to 767px (the code work only for smaller screen) change it to the measure you want.
Looks like you are using "display: flex" which could be part of the problem. You could try using display: "inline-block" or "display: flex-box" which will start you in the right direction. Check out this article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm experiencing some issues with parallax background images.
I'm working with this template. As you can see, in the home page there are 2 divs exploiting stellar.js (i.e., .fh5co-cover and #fh5co-started ). All seems fine with a computer resolution but if I try to visualize the website with a Phone resolution (e.g., simulating the iPhone7 Plus rendering through Chrome) the background image in .fh5co-cover is not centered. Moreover the background image in #fh5co-started displays grey borders when you scroll the page.
Is there a way for centering background images and for avoiding those annoying grey borders at small resolutions?
Set the background position x to 50%:
background-position-x: 50%;
In here:
#media screen and (max-width: 768px)
.fh5co-cover {
heifght: inherit;
padding: 3em 0;
background-position-x: 50% !important;
}
PD: important! because the position is being changed in js by whatever plugin you are using.
About the gray border, couldn't find it so i guess was just a bug on your browser
I am trying to make the following jsfiddle code work. Actually all is working fine, for server side i am using ColdFusion.
the values are appearing 6 in a row. the 6 is hard-coded in ColdFusion variables, so it splits the values in 6 and then next row.
Now i want to make this a responsive so it should work with tablets and mobile devices without much pain in the a****s
Here is the fiddle i had generated
http://jsfiddle.net/9arpxvga/
This needs a help in implementation of responsive design...
A Jquery, javascript solution will also work
You're going to be hard-pressed to find an objective solution to such a broad question. So, broadly: one of the many ways to implement responsive design is to write CSS media queries, targeting various screen sizes. Here's an example snippet taken from getskeleton.com (which might be worth checking out if you need a bare-bones responsive framework to get you started)
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
You'd just write new CSS (or override your css) for each of the screen sizes you're trying to target. (Nest your css within the brackets after each media screen). Hope that helps.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
How can I make my website mobile, because if my website is viewed on mobile device, then my website design doesn;t fit, the header& footer are unbalanced.
Please suggest what change in my web site good view on mobile.
You can use mediaqueries*, you should do resarch on responsive design:
body{
background-color: red;
}
#media screen and (max-width: 800px) {
body{
background-color: green;
}
}
#media screen and (max-width: 500px) {
body{
background-color: yellow;
}
}
The code above is a simple example. The body will be red by default, green if the device is smaller than 800px and yellow when smaller than 500px. You can do this for print only, or min-width:1024px, or orientation:landscape. Plenty of options :)
A tip:
This tip will save you a lot of time: Instead if defining widths for different devices, use standard block behaviour. This will give you the option to use the element as 100% minus margin/padding/border.
#wrapper{
width: auto;
display: block;
margin: 10px;
}
*In the link provided there are examples for iPhone only. I suggest you keep it as broad as you can, this will be better in the long run