So my graphic artist came up with a layout that I am having trouble coming up with a clean solution to. Basically they want a full-width responsive image, with text over it. But the text has to be left-aligned and fit within a container div, instead of being full width too. I also need to take care of mobile/tablets/etc. so I have to make sure the font size works on all devices too (hence the font resizing in the JQuery/JS).
So I was just wondering if I am doing this the most efficient way possible. I feel like bootstrap should have something to fix this issue and that I just missed it, but this is the best solution I could come up with (WARNING: code is still a work in progress, don't hate me for poor JS/JQuery =D)
So here is my BootPly with the solution I came up with:
http://www.bootply.com/bdS9H3otpi
I am hoping someone will be like, oh boy that was overkill just do X, but for the life of me I cannot think of what X will be.
P.S. My question was basically answered by myself, I am just hoping there is a cleaner solution. If no one can come up with one I will just clean up the JQuery/Javascript code and use it as is
first of all no need for JS .
1- main part put the image as back ground and the text as title ( h1 )
2- for responsive use only CSS
for example
#newsHeaderTitle{
color:white;
height:100%;
margin:0;
font-size:350%;
line-height:350%;
}
/* image BG image */
#media only screen and (max-width : 1200px) {
#newsHeaderTitle{font-size:350%;line-height:300%;}
}
#media only screen and (max-width : 992px) {
#newsHeaderTitle{font-size:300%;line-height:350%;}
}
#media only screen and (max-width : 768px) {
#newsHeaderTitle{font-size:200%;line-height:350%;}
/* image BG tablet image */
}
#media only screen and (max-width : 480px) {
#newsHeaderTitle{font-size:100%;line-height:100%;}
/* image BG mobile image */
}
try to use all height and sizes in EM its better than %
dont add your CSS in html .
Related
I have an HTML Website. I want to display it in an mobile app using HTML code. But I wan't to block / not load the original website background because it's very large and you can't see it mobile.
Is there a way to do it with HTML / CSS / JavaScript?
Use media queries to load the background image if the screen is larger than XX.
Add the media query to your CSS.
Change div to the element you're loading the background image on.
<style>
#media (max-width:500px) {
div {
background-image: none;
}
}
</style>
** EDIT **
With mobile-first being the correct approach, it would be preferred only to add the background image when the viewport reaches the required size.
<style>
#media (min-width: 644px) {
div {
background-image: url(/image/here.jpg);
}
}
</style>
CSS Media Queries is the best way to apply different styles for an HTML document in different resolutions.
so, if you want to apply a different style (here remove background image in mobile resolutions) you may use Media queries
Eg.
<style>
#media screen and (max-width:640px){
element{
background:none;
}
}
</style>
I'm building up a website using fullpage.js. When zoomed 100%, the webpage looks great, yet, when zooming just 25% more, texts and imgs will start overlapping or even disappearing, as each section has very limited height (with no scrolling), making my webpage impossible to read. I'm using
em
unit for font sizes and percentages for sizes, imgs and margins (except if its too little margin (5px, for example), where I use
px
). Hence, I was wondering if there's a solution using Javascript, CSS or HTML which can maintain font size even if the webpage is zoomed. As of now, I've tried, with no success, the following:
document.body.style.zoom="100%"
-webkit-text-size-adjust: none;
Using fullpage's feature resize, but it only works if the user resizes the window once the page has loaded.
document.body.style.webkitTransform = 'scale(1)'
My website is (sorry, I don't know which part of it to post, as the issue involves all of it):
http://rienpipe.es
Thanks in advanced!
you can fix this by using #media query's and a viewport in your css , and add this meta tag to your html:
<meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>
and with the #media query's and viewport you declare what size you have per screen width using this media query + viewport in css:
#media screen and (min-width: 820px) and (max-width: 920px) {
#viewport { width: 820px; }
// your css for screens between 820 and 920 pixels in width goes here
}
i mostly use the value's : from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, #media screen and (min-width: 1200px){ #viewport { width: 1200px; }(this last one will set the size for any screen bigger than 1200 px in width so your code for the biggest version goeds here}
So this means you will have 6 times your css code which is adapted will be adapted to the size.
This is called adaptive or responsive design and is pretty easy to do
For more info you might check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Dear Stackoverflow community,
I'm very desperated about following setup:
- I have a Website with a Jquery onepagescroll design.
- If the width of the browsers window is below a certain point (769px) the onepagescroll disapears
- Instead a Gumby based design gets activated
But when happening so
... the third of the three sections overlays over the second one a
... after the first section is a gap
I researchead about four hours on this problem and couldn't solve it.
I hope you can help me.
Yours Sinceryl,
yooui
Code:
index.html (http://pastebin.com/6fMtkBbm)
jquery.onepage-scroll.js (http://pastebin.com/FnQWWe7J)
To fix the spacing and overlap, take a look at your CSS. The three "section" elements each have a height of 100%, you'll have to change that in your responsive styles.
So try adding something like this:
#media only screen and (max-width: 768px) {
.onepage-wrapper .section {
height: auto;
}
}
I want my page to scale awesome to fit all possible screens on all devices, so I've used an idea to change em size of the root element. All child elements have sizes in em;
Resizing of the page and zooming should also be supported well.
I'm currently having 200 lines of such a funny css code:
.........
#media (max-width: 400px) {
#vb { font-size: .8px}
}
#media (max-width: 350px) {
#vb { font-size: .7px}
}
#media (max-width: 320px) {
#vb { font-size: .64px}
}
.........
I would like to ask for a pretty library that would generate this code automatically.
I am sure that this huge css code should be generated on frontend, because those 200 - 1000 lines consume kilobytes.
PS: What about correctness of my approach?
The solutions could be:
what if I calculete the page size by JavaScript and put just two lines of code like:
var fontSize = calculateFS();
$('#vb').style({sizeSize: fontSize});
This code works good if we are not going to resize the window or zoom in-out. But if I'm going to catch events onzoom or onresize, there are serious lags in interface.
any other ideas form the community?
Thank you for attention
Why not consider responsive typography using rems?
This article explains this in much more detail. A short excerpt:
#media (max-width: 640px) { body {font-size:1.2rem;} }
#media (min-width: 640px) { body {font-size:1rem;} }
#media (min-width: 960px) { body {font-size:1.2rem;} }
#media (min-width: 1100px){ body {font-size:1.5rem;} }
This would seem like a far better option than using ems or pixels, because rems are relative to the body element, not the parent element.
I might have misinterpreted this, but it doesn't really seem like you need to use so many media queries, or even any JS at all.
If you just want to keep media queries maintainable, perhaps consider using Compass and Sass? http://css-tricks.com/media-queries-sass-3-2-and-codekit/
How do you make a div disappear when reducing window width, leaving it's complete space available to other elements? I do not mean hiding piece by piece on overflow, but the whole element.
I came across this brilliant feature on the following URL:
http://flexslider.woothemes.com
Is javascript required or can it be done with CSS? I noticed the page is pretty much HTML5.
You can do this with just CSS:
#media all and (max-width: 480px) {
.mydiv { display: none; }
}