I'm working on a template page for a website.
It can be seen here : http://www.acielouvert.net/clos/
In the header, I have a slideshow with images width of 100%, they resize with the browser.
When I resize the browser below 960px I want div .continue to stay in touch with div.header.
Actually I put a margin-top: 700px on div .continue.
Have you any idea how can I do this ?
I don't want to use media queries.
Please see here the code for the page : http://pastebin.com/gLaerw1F
Thanks,
Guillaume
Something like this.
#media screen and (max-width: 960px) {
// What ever you want ...
}
I did some several test and the only way I found is using % for the margin-top of .continue
When user resize the browser below 960px, the two divs are stuck together and I avoid the gap due to margin-top: 700px;
I will surely add some media queries in the end but the % is helping a lot.
Thanks for your help #Junaid, #Josh Burgess, #jurgemaister.
Related
I am working on a problem, where I do not know how to make the last element visible when screen is resized. It is best explained in the video below
https://imgur.com/IG1rqnL
I am using Chakra-UI, but if this could be solved using raw CSS, that would be a great help. Can someone point me in the right direction? Thanks
You can try add a max-height to your element :
.yourMenu{
max-height : 70vh;
overflow:auto;
}
It will add a scrollbar when the element is too small. That's the easiest solution.
You can also go further using media screen and set a special param for "small height devices" :
#media screen and (max-height: 700px) {
/* Some special "small height screen menu display here */
}
Like maybe reduce font-size ? Padding ? break menu in 2 parts ?
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.
I'm trying to change the height of the Twitter feed module you can see here. The layout was done by the vendor we're using for our WCMS, so the CSS is proving a little difficult to navigate. I resized the iFrame for the feed so that it spans two rows, but now when it resizes for phones and tablets it overlaps the "Spotlight" article below it. Here's the CSS. Any help is much appreciated!
Instead of clearing your floats with an extra div using clear:both it's best to get in the practice of clearing your floats in the parent container using overflow:hidden
The interim fix for the problem your having with your twitter iFrame overlapping your "spotlight" article is due to line 3568 in app.css where the max-height is specified. Removing that should fix the issue.
.home-content-modules-row .content-module {
/*max-height: 320px;*/
}
Or maybe doing a media query to specify max-height:auto for that element when in tablet or mobile form.
#media only screen and (min-width: 64.063em) {
.home-content-modules-row .content-module {
/*max-height: 320px;*/
}
}
The reason you are facing this issue is because the article tag which wraps the iframe has a CSS property max-height:320px attached to it. Due to this, when you view in the mobile view, the article tag does not expand beyond 320px. As the width is also being decreased in the mobile view, the 320px height limitation causes the content to overlap rather than flow below it.
What you can do is override the 320px max height limit with something like this in your media query :
.home-content-modules-row .content-module {
max-height: 1000px;
}
Hope this helps!!!
I've set up my stylesheet to have a container (#container) holding the header/content/sidebars/footer/etc and I've put that in a main wrapper (#mainwrapper). The effect I'm trying to achieve is similar to College Humor's website; the ads on the side. I'd like to have a division on the left and right of the container. What I've done is set it up like this.
<div id="mainwrapper">
<div id="leftwall"></div>
<div id="container"></div>
<div id="rightwall"></div>
</div>
Basically, I want to be able to put an image (or bg image) in the leftwall and rightwall divs, however, I don't want it to trigger the x-scrollbar. I only want it visible if the viewer's resolution is high enough. Otherwise, just display #container.
I've set them to float: left, so that they appear on the left and right of the container, but I'm a stuck as to how to make them appear as a background image.
The reason I want to do it this way is that I already have a background image and I want to keep it optimized. So, instead of having a large image that spans 960+ pixels (#container width), I can have 2 images that are 100px wide. (the width of #leftwall and #rightwall)
I hope this is understandable and thanks to anyone trying to help in advance!
Have a good day, Brian.
I understand what you want. These days new media queries has been added to make these type of design.
You can define it in your css files for a particular resolution or mobile devices.
#media screen and (min-width: 1080px){
#leftwall, #rightwall{display:block;}
}
#media screen and (max-width: 1024px){
#leftwall, #rightwall{display:none;}
}</pre>
Below is the link where you can learn how to use these queries.
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Hope This Helps,
Cheers,
I am not sure what you want to achieve; maybe you could show how your css look like so far but have you tried by giving a min-width to the external containers?
I set up a fiddle with what I think you're trying to achieve, you'll just have to change some numbers to fit your needs: http://www.jsfiddle.net/KrfVR/14/
Adjust the size of the result box to see the side divs appear/disappear.
I'm still relatively new to css positioning, but have read a few books and watched a few tutorials. I made some palettes over at colourLovers, and wanted to see how they would look when applied to a website as a color scheme. So, using the little coding knowledge I had, I created a page to demonstrate my color scheme. After a while, it became a sort of self-confidence boost, and I've gotten just about done with it when a little thing caught my attention.
I have a two-column layout - on the left, there is the navigation menu, with a header above and a content section to the right, all in their own divs. My question is this - when I scale the page (as in, make the window for viewing it smaller), the content section gets pushed so it wraps under the Div. The way I could fix this was to make an additional div with no bg color and make it as long as the content that contained the navigation div, so they would line up, but it doesn't fix it if you resize the window.
I'm sure there's an easy fix to this, but my limited knowledge doesn't yet know it. If it helps, I've attached an image file below of what the site looks like in my editor (Coda). I also provide a link to the code of that page of my site which I've uploaded to textsnip. You can find it here - http://textsnip.com/f434fd. I have added comments to mark the header, sidebar, and content sections as well. Any help would be greatly appreciated. Thanks in advance!
The easiest solution is to use min-wdith on your container:
<div style="width: 90%; padding: 10px; margin:0 auto; min-width: 400px;">
This won't work on IE6, but will work on everything else. And, if you need IE6, then there are several workarounds that will solve it.
I would suggest you to use % value instead of px.
For example:
Header: 100%;
Nav: 20%;
Content: 80%;
Footer: 100%;
This way, if someone rize the window, it will always display perfect.
Use "float: right" on content DIV. And replace px width with %.
Check out this
You can use CSS Media Queries to adjust things as they get bigger and smaller. For instance, if you wrap your entire page with a div with an ID of wrapper (and use Simon Arnold's solution for the width of the individual elements), then you can do this:
#media (min-width:1200px) {
#wrapper {
width:1100px;
}
}
#media (max-width:1200px) {
#wrapper {
width:90%;
}
}
These set your wrapper to 90% if the screen size is less than 1200px, and 1100px if your screen is bigger than 1200px. Thus, if the browser is wider than 1200px then your page will stay the same size, and if it's smaller then it'll flow nicely.
#media (max-width:700px) {
#wrapper {
width:100%;
}
}
That one makes it wider when the browser gets smaller, and
#media (max-width:400px) {
#wrapper {
width:400px;
}
}
that one sets it to a fixed width when the browser gets really small. Those are really simple queries, if you're interested in learning more about media queries then here's a good place: http://css-tricks.com/6731-css-media-queries/
And of course, it wouldn't hurt to make the page flow between those transitions using CSS3 Transitions.
IE8 and below, unfortunately, do not support media queries. BUT you could read their browser type with PHP instead, and direct them to get a decent browser... It'd help make the web better. ;)