I am creating a feature for my responsive website. It consists of an image carousel which contains a caption. On desktop, I am displaying the caption absolutely. The div, which contains a header and paragraph, is positioned on top of the image and takes up a width of 40%.
When the user is using a tablet or mobile I would like to display the caption relatively with a width of 100%. This makes the text appear under the image which is more suitable on the smaller screen sizes.
The two ways of doing this would be to duplicate the code with different css classes - one relative with the visible-desktop class and the other absolute div with the class hidden-desktop. The other way is to use javascript to toggle a class.
I was thinking, it would be great if I could achieve the above using purely css. Something like .desktop .carousel-caption { Is this at all possible.
You could maybe just use media queries and enter your different code in the relevant media query. Bootstrap's media queries are detailed here
http://getbootstrap.com/2.3.2/scaffolding.html#responsive
Related
I have been teaching myself front end web development for a while now and have taken on several client projects with good success so far. I am currently working on the site www.thrivetech.com and having an issue. There are 3 text columns with images above each on the home page of this site, and I cannot come up with a good way to make them all stay the same height. At different screen widths these 3 columns change height and sometimes don't match. Squarespace objects are natively responsive, and when the screen gets small enough these 3 columns stack on eachother and look fine. I have added a lot of Custom CSS to change background colors, text colors, etc. but can't figure out how to make this work. Even if I remove ALL CSS and just have a plain white page with black text, these columns still do this and don't stay the same height. I have even contacted Squarespace support and they haven't come up with a solution. See image below:
I would include some CSS source, but it's best to navigate to the site at thrivetech.com and inspect the CSS to see what is going on. I have considered doing something like using JS and jQuery to get the height of all 3 of these, determine which is the greatest, then set the height of all 3 to the greatest height, but it seems like there should be an easier, more elegant pure CSS solution?? Thanks for looking!
RESOLVED:
I fixed the issue by using a media query to set the parent element of these 3 columns to display: flex; when the window is at least 640px wide. The reason I need the media query is because they need to display as blocks when the window gets smaller so we can take advantage of Squarespace's native responsive design so the columns will stack on top of eachother on mobile and smaller screens. Here's some simple pseudocode:
#media only screen and (min-width: 640px) {
#parentDiv { display: flex; }
}
thank you for your support. I have created one litte bootstrap page.
I have only two little problems. The logo position on the desktop browser is different to the position on the mobile device (iphone).
i found out that if you change the css code "bootstrap.min.css" from the container-fluid - padding-left:15px; to padding-left:0px; the logo will be at the correct position on the desktop browser but on the wrong possition on the mobile device.
sample image
do you have any ideas to solve this problem?
The reason why you are experiencing this is because twitter bootstrap utilizes media queries. A media query essentially allows for a css class or id to have differing stylings for different screen widths.
To fix this you could go in and alter every media query in the minified code to fit your requirements. A better solution however, is to write your own css in a separate file that over rides the bootstrap.
Example
So here is a div with container fluid
<div class="container-fluid example">
// your div content
</div>
Here is your css that will override the padding left.
.example {
padding-left: 0px;
}
I'm using Slidebars as extension to create off-canvas menus for my site. Custom width can be set using data-sb-width attribute. I have set it to 370px like this:
<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="370px"></div>
On mobile i need to change it to 280px, but I don't know if this is possible with CSS media queries. Help would be needed.
As this is an HTML attribute and not a CSS style, you won't be able to directly use CSS media queries for this.
I see several options to explore:
set the data-sb-width using Javascript or jQuery (before you setup the slide bars)
use two slide bars with different widths, and use media queries to hide one or the other (not quite sure the slide bar script will like that)
give the width as a percentage rather than a fixed width, but that may be difficult to control
I am making a responsive website where I have used the img attribute in the HTML markup so that images scale nicely, to the point where they are moved about with media queries.
(Similar to this fiddle http://jsfiddle.net/QfDv5/ except I have used seperate images.)
However, for ease of updating, I want to add the image paths to the css file instead of the HTML markup. I thought the img-background attribute would be good to do this. That said, I want to stay away from 'background-size' attribute since older browsers don't play nice with it.
I thought of making an element within each of the scaling class divs. The div scales horizontally IF I declare a fixed height, but I cannot seem to get it to scale vertically automatically. I added:
#test-2{
width:100%;
height:100px;
background-image:url("http://www.desibucket.com/db2/01/26039/26039.jpg");
}
jsfiddle
What am I missing in getting the new element to scale without a fixed height?
How can I get the actual background image to scale with the new element?
Thanks
solution is using media queries and set the exact height you want.
media screen and (min-width: 1234px) and (min-height:700px) {
image {height: xxxpx;}
}
Suppose I display thumbnails (~200px width each) in a web page. In a midsize screen (e.g. 15") I can display 5 thumbnails in a row.
Now what if I resize the browser window so that 5 thumbnails don't fit the page width ? I would like the number of thumbnails to be changed automatically to fit the page.
For example: suppose, 5 thumbnails with spaces between them take ~2000 px. Now I am resizing the window. When the page width becomes < 2000 px but > 1600 px. I would like to display 4 thumbnails in a row and so on.
What HTML/CSS markup should I use to achieve that behavior ?
I once made a fiddle to explain media queries to someone. You can use a similar design, although it's usually much simpler just to float:left or display:inline-block your elements and let the browser take care of the rest.
DEMO
One way is to use a responsive layout. Twitter Bootstrap provides the same by default.
Another way is by using #media tags. Refer http://www.w3schools.com/css/css_mediatypes.asp . Here, you will need to make a function like this:
Get the screen size using mediacheck and then set up thresholds using #media.
You can use the float property for this:
float: left;
Floating elements will wrap when they do not fit in the parent's width.
Example (try resizing the page)