Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 months ago.
Improve this question
I have the problem that my email template is displayed differently on different mobile devices.
The textbox is sometimes centered, but should always be left aligned.
Does anyone have an idea what this could be and how I can solve the problem?
How it should be on every devise:
enter image description here
How it it (sometimes):
enter image description here
Try this in your style.css file:
.yourClass{
justify-content:start;
}
Have a nice day,
Angélique.
You could try to use a media-query at the specific resolutions that look different and apply different css rules to ensure it stays left aligned. e.g.
#media (max-width: 1024px) {
.cssClass {
}
}
As for the reason, some screens have different pixel ratios, and therefore the padding or other values sometimes change.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm creating a web app for small screens and also for large screens. So lets say I want to display a title "Stackoverflow helps a lot" in one line. This is not a problem for large screens but when I drag the browser window smaller, some text jumps into the next line. Is there a way to avoid the break and display "..." instead?
So for example that I get "Stackoverfloy hel..." on smartphone browsers?
Thanks
add this css to that element
{
overflow: hidden;
white-space: nowrap;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a website with a background image, choosen by random with javascript:
document.body.style.background= 'url('+randombgs[num]+')';
I have set the background to an imagefrom the randombgs[] array which contains 15 backgrounds. But the background gets cut off, and the whole image isn't displayed (see picture below)
This is what I see:
This is what I should see
How can I fix this, so my browser shows the whole image and not 95% of it?
Use CSS background-size property:
body {
background-size: contain;
}
The image will fit your container.
You can use the background-size property in CSS (with value contain).
See http://www.w3schools.com/cssref/css3_pr_background-size.asp for more details.
Not supported on IE8 and less: http://caniuse.com/#feat=background-img-opts only.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm having this weird CSS issue that I have huge space in bottom of my webpage. I can solve it putting height: 100% on body, but then functions like $(window).scroll() function in JS don't work.
If I move my footer outside the wrapper called #sb-site, footer drops under that huge white gap.
Live Preview:
http://personaii-demo.tumblr.com/
I would be really happy if somebody could help a little!
You have a min-height set of 8164px on #sb-site. I just turned it off using developer tools, it got rid of the white gap at the bottom and everything else seemed to work ok? At least for me.
Just remove the min height on the page.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
As you can see on my website, my horizontal navigation menu is too long to fit on the same line as the logo when viewing the page with an iPad.
Therefore I'd like to shorten the menu items based on the viewport width (i.e. use "Coaching" instead of "Espace Coaching" if the viewport width is <= 768px.
Is it possible? Is there a JS plugin for this? (haven't found anything on google)
Here is a really simple answer: http://jsfiddle.net/r5Ft9/4/
Use CSS like this:
#media screen and (min-width: 0px) and (max-width: 799px) {
.hide-on-small { display: none;}
}
And HTML like this:
<h1><span class="hide-on-small">Espace </span>Coaching</h1>
Also, the following SO question has code snippets with CSS media query breakpoints: Common CSS Media Queries Break Points
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a website that is entirely black and white (with a few color trims), however the black is overwhelmingly the largest portion of the page. I'd like the page to be more ink efficient by inverting all the colors when you go to print it. (making white the majority of the page)
Why not specify those styles in the #media print media query? Google can help, but here is one site with an explanation.
In WebKit-based browsers, add to CSS:
#media print {
html {
-webkit-filter: invert(100%);
}
}
In not webkit browsers, do it manually using #media print.
Yes, use a print stylesheet and invert the colours in there...
http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/