I used a theme with a slider called flexslider to make the "Who's Using NameCoach"
https://www.name-coach.com/ (box tiles section with a list of users)
The theme seems to inherently have some sort of responsiveness feature in it.
However if I adjust the window width to lets say that of a mobile screen users size these tiles get so small that the users cant even see it.
Was wondering if anyone knows of any overiding css effect such as setting
when window => max width: 450px;
The tiles grow bigger and show lets say 4 entries rather than all 12 in a very small size.
Thanks!
Try something like this maybe?
#media (max-width : 450px) {
.flexslider .slides>li { width: 120px !important; }
}
Related
Question
Can I use length and width ratio to change CSS file? If length is greater than width then device must be cellphone or tablet and ratio must be grater than one. And if ratio is less than one that means device must be desktop or phone is switched to landscape mode!?
And if it is so, then I can easily use JavaScript to change CSS file for different platforms! I'm I right or not?
When building websites with the mobile-first approach, you can change elements according to the screen width of the device. To overwrite properties for all screens bigger than e.g. 649px:
#media only screen and (min-width: 650px) {
h1 {
font-size: 3em;
margin: 1em 0 1em 0;
}
}
You easily use CSS media queries for that
Checkout:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
So you will be able to set query for landscape, portrait, print, screen and so on.
Or specify different css style using Javascript at each query
Checkout :
https://www.w3schools.com/jsref/met_win_matchmedia.asp
On desktop devices, I have designed my elements to be grayed out by default, but become colored when a user hovers over them. On mobile devices, I want them to use the hover state CSS to be colored in by default. Is it possible to do this through JavaScript?
I have lots of elements with different colors, so it would be much easier to simply trigger the state through JavaScript rather than writing new classes and adding them to the elements.
No need for JS! You can use media queries in CSS to accomplish this.
Note: I'm using Bootstrap 4's numbers for screen sizes in this example:
.element:hover {
background-color: gray
}
#media only screen and (max-width: 767px) {
.element {
background-color: gray;
}
}
Bootstrap starts medium screen sizes at 768px, hence my max width of 767. If you want, you can try it out at https://jsfiddle.net/21haxstd/
I customized the sap.m.CustomTile with some sap.m.FormattedText. I need this CustomTile to be resizable according to display resolution e.g. from 500 px to 320 px. I used for this:
#media only screen and (max-width: 500px) {
.tileSmall.sapMCustomTile {
width: 80.9vw !important;
height: 80.9vw !important;
}
}
#media only screen and (max-width: 320px) {
.tileSmall.sapMCustomTile {
width: 200px !important;
height: 200px !important;
}
}
I can not use % because it behaves strange in my app. So I am trying to use vw instead. I did demo. I would like to keep it all the time as it for resolution 530px in the:
But when the resolution is change to e.g. 417px I got:
The resolution 357px I got:
Is there any way how to anchor footer and subfooter (last two rows)?
Or how to change height of the gap (created by br tag) according to tile height?
Thanks for any advice.
Because you are using VBox inside the custom tile, it is fairly easy to achive what you want. You can check out the Size Adjustments Explored demo for more examples.
The basic idea is that you can play around with the grow / shrink factors of each item inside the VBox. By default, all the items of a VBox are treated equally and are stretched to fill in the available space. Because you want your header and footer to be fixed, you should set the shrinkFactor (default = 1) and growFactor(default = 0) to 0 for these items.
The center of the tile should be just "whitespace" to fill in the rest of the available space, so you can give it growFactor and shrinkFactor equal to 1. You also don't need to put brs in there, because the item will grow / shrink dynamically to fill in the remaining space.
You can add these factors for each UI5 Element using the layoutData aggregation and passing a FlexItemData element.
Another small change is that you should specify width: "100%" and height: "100% for the VBox to make sure its size adjusts based on the tile's size.
Header / footer
new sap.m.FormattedText({
htmlText: "whatever you have now",
layoutData: new sap.m.FlexItemData({
shrinkFactor: 0
})
});
Center
new sap.m.FormattedText({
htmlText: "no need to put anything here",
layoutData: new sap.m.FlexItemData({
shrinkFactor: 1,
growFactor: 1
})
});
You can find a working version of this solution here: http://jsbin.com/tirizanaje/1/edit?html,css,output
I know this question sounds crazy, but I'm going to explain it.
I have a responsive website and all works OK, but when the width is too low (width < 500px) the website (which is still responsive) start to rearrange in such a way that I prefer to NOT being responsive anymore.
I'd like to know if there is a script or anything that can solve this. Please any help will be useful :)
set a minimum width on the html / body
html, body {
min-width: 500px;
}
Making elements responsive is usually done by setting width to a percentage of parent elements. The above would be an easy fix, but it's possible there will be elements you need to style using media queries.
You can place your css within media queries so that it only applies under particular conditions. E.g.
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
I've been playing with the google apps console and it has a fluid page where there are grids of items. When the user makes the window bigger and smaller the width of the grid items gets smaller and smaller until it drops one onto the next row when it cant make each grid item any smaller.
Can anyone tell me what this technique is called so I can find some tutorials. For bonus points, does it require javascript?
The technique is known as liquid or elastic layout. It is achieved via CSS, no javascript required. If you're looking for tutorials, you might this article useful:
"70+ essential resources for creating liquid and elastic layouts" by Zoe Mickley Gillenwater
Most used method (at least by my observation) is floating div with width in percentage and css media style.
Example
.thumb {
float: left;
width:18%;
margin:1%;
background: #eee;
height: 200px;
}
#media (max-width: 724px) {
.thumb {
width:48%;
}
}
In example above div.thumb will have width of 20%(margin+width) meaning it will have 5 div per row. And if viewport has width of max 724px there will 2 divs per row.
There are a lot of methods for this but this is most easiest to do, if your div's have same height, otherwise you will have some glitches with float.
EDIT: here is jsfiddle http://jsfiddle.net/P2URP/
What you are looking for it's called fluid (or scalable, liquid, etc.) "tiles" better than "grid"
This other question may solve yours if you want to do it only with CSS: Fluid, flexible and scalable tiles to fill entire width of viewport