-
AuthorPosts
-
May 22, 2013 at 6:24 am #23621
when i use a background image & placing “live” text over it – it looks good.
BUT
in tablet / Smartphone browser the background image stays in the same size making it look real bad.
Is there another possible solution for text on image (that will stay responsive)?
(or some kind of solution for these cases)
Thanks.
May 22, 2013 at 10:30 pm #120546Hi,
Are you talking about the Layer Slider here or something else. Please be specific. If you have a url on the demo website showing what you mean, it would make things easier. If you have a live site with a url showing an example, that would be even better.
Thanks,
Nick
May 23, 2013 at 6:00 am #120547Nick hi,
Thanks for the answer, take a look at this page on the bottom,
there are 2 background images with text positioned over them … when the window size changes it does not look good.
if you have an idea how to solve this i will be more than happy to hear you.
this is the page url (i have this problem in more than one place):
http://www.glassesoff.com/the-science/
thanks
May 23, 2013 at 9:24 pm #120548Hi,
Here are the media queries for the various device sizes. Please add it to your /css/custom.css file
@media only screen and (min-width: 768px) and (max-width: 989px) {
.main_color h3 {
font-size: 150%;
}}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.main_color h3 {
font-size: 150%;
}}
@media only screen and (max-width: 479px) {
.main_color h3 {
font-size: 80%;
font-weight:bold
}}Please use classes when you add html tags so this way they can be targeted by css. Invent the class names . So don’t add <div style=””> or <div> or <h3> .. Instead add <div style=”” class=”mydiv-1″> or <h3 class=”my-h3-class”> .. This way you can use css to target that specific tag. You need to do that on bottom of that page with read more , since you have same font problem there as well. Try to use ”em” when you define font sizes and not pixels font-size: 1.1em; and not font-size:14px;
Thanks,
Nick
-
AuthorPosts
- The topic ‘Background image problem’ is closed to new replies.