I am working with a Responsive Design website, more specifically a page that incorporates several Divs. When you re-size the webpage the width of the divs change as they are set as percentages. As the height has to stay constant, unless the div will disappear, I have to set break-points to change the height. If I don't change the height, it stays constant and adds "margin" between divs below. Essentially, my logic is: when the window is re-sized and the width is less than 810px, then remove all CSS styling, and add margin top, items 2 through infinity. As this is hard to explain through writing, I have added the following code at the end.
When I re-size the browser window, and the content div is less than 810px, styling is not removed. Looking at my code, what could be the culprit?
The function is at lines 27-50: https://github.com/jdmagic21/coded_container/blob/master/work.js
Rather than doing it with Javascript, you should consider using CSS Media Queries to change the styles depending on the width of the browser.
Here's a tutorial - one of the top hits on Google for "How to use CSS Media Queries"
Here's a table of browser compatibility for Media Queries. As long as you don't care too much about IE8 or previous, you're ok!
You can do it like this with CSS Media queries.
#media screen and (max-width: 810px) {
/* reset the styles of the divs here */
}
Related
i am developing a website for my own company. i came to a problem, when you make your page smaller some div's overstack eachother. i was wondering if you can make a variable that is set to the width of the page so you can change your css whit javascript when needed using that variable.
i have tried the following script in css without succes
display: flex; flex-wrap: wrap;
when the page becomes smaller than 1840px. the 4 pictures on the right will overlap the text box on the left.
now is my question how to make the text block shift up when the page gets below 1840px
You need to begin looking into Responsive Web Design, which says that pages should be comprised of:
CSS Media Queries (that allow "conditional" styling)
Flexible Layouts (i.e. Flexbox or CSS Grid)
Responsive Media (using size units that allow for media to
grow/shrink as needed)
Your particular issue could be addressed with:
Media Queries (when the viewport size is x, apply style y)
Responsive Media (set image sizes to relative units like %, vh,
vw)
An example of the page in question: https://rhstrategic.staging.wpengine.com/team/brandon-blackwell/
I have kind of a specific situation here in which I have a block div that is staying aligned left and using only a 50% width when the screen is sized below 960px (The name block in the red banner part at the top). I tried altering the CSS to make the width 100% but the problem is that the height seems to be being generated dynamically with with width (If I increase the div width to 100% the height doubles as well).
I can't figure out how to separate the height and width and I don't know where or what file these CSS changes are being dynamically generated from. It looks kind of like an HTML5 data object but I'm a bit new to these types of things so I'm not sure how to change it. When it gets down to 650px it seems to behave as I want it to. But between 650-960px it is left aligned.
All I need it to do is when the page goes down to 960px or below, I need that part that is left aligned currently to be full-width across the page and centered. Any ideas?
Just a warning: I'm not 100% sure that this answer will work correctly... My idea is to put this style in the div:
div{
width:100%;
height:50%;
}
Couple of things I would like to suggest:
If you are new to front-end designing, I would recommend you to understand the grid system of a HTML page. Learning Bootstrap will be a perfect start for you.
Now you want to make your website fluid, so take a look at CSS media query. This will help you to achieve responsiveness.
Happy Coding..
Is there a CSS(3) trick to stack divs horizontally if they don't fit in their container? If the container is smaller than the sum of widths of the divs, they should overlap each other, the first aligned to the left, the last to the right, until there is just one div visible if the container is too small.
I thought of a table or ul, but I didn't got the desired result.
If this is not possible with CSS, I will go for a JS solution with jQuery. This will be easyer, but not as nice as CSS.
To fit them inline, this is used: display: inline.
If they don't fit in, you can use max-width for the child elements. Or you can use width: 90% for the child, so it always fill and shrink to the 90% of the parent element.
Otherwise in CSS3, you can use media queries, to detect the current browser size and then change the properties.
You cannot check the width or height of elements in CSS, for that you will require JS or jQuery.
In jQuery just use this:
$('selector').css('width');
And use it! And then using z-index overlap them all so that they are overlapping each other if the width is less for them :) Or try to set some sort of max-width so that they are aligned respective to the current size.
But you can check the browser size using CSS3 Media Queries, so that you will know what is the size of the elements now and change their properties! CSS3 Media Query might be an alternative if you don't want to use jQuery but CSS. But its not that much efficient as you will get the widths of the devices and their screens not the elements.
Reference:
http://css-tricks.com/css-media-queries/
I'm looking for a solution for this that has more precision than breakpoints. I'm aware this will require JavaScript but I am having trouble finding a suitable plugin.
The majority of text on my site will stay the same, or I will simply adjust it with media queries (say 90% for tablet and mobile). That's fine, but I'm looking for a "real-time" solution" for areas such as my navigation menu and my banners.
See the site here
You can see all my text is relative and sized using ems with a base font-size of 100%
If you resize the site you'll notice the menu "crashes" as the font size becomes too big. I'm keen to find a JS solution that will resize that text down relative to the width of the navigation bar so that I can always keep it all on one line (At mobile width, it'll go down into a collapsed menu)
Check out this jquery plugin
http://simplefocus.com/flowtype/
It resized font-size and line-height based on element width.
I am developing mobile web app. However, safari in iOS 5.1 or below has limited memory. I need to minimize the memory usage when i use css3 transition. I found that if I use css style "display:none / visibility: hidden", The app will not crash by memory problem. So I want to make thing "hidden" when they are truly hidden.
My English is bad. the picture can show what I want to:
uploaded image**:**
Another example which is a website used the css "visibility: hidden" property to hide every session when it is not on screen:
example website: Dentsu Network
There's a plugin for jQuery offering viewport selectors.
You can set everything to visibility:hidden; and then show only the items in the viewport. Once the user scrolls you can re-grab the viewport elements and show them too.
$(":in-viewport").css("visibility", "visible")
You should be able to calculate the viewport from document.body.scrollTop and the size of the window.
Say if the scrollTop is 100px, the user the has scrolled down 100px. And now you may want to hide a div which occupies the top 100px of the screen and show a div which start at 101px and extend till the size(height) of the screen