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
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 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.
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 7 years ago.
Improve this question
I have 3 blocks which there is
Block 1 - div 40% width
Block 2 - div 30% width
Block 3 - div 30% width
It is using bootstrap.
Pressing F5 It loads fine. But then It breaks the layout.
I think it can be some problem with CSS or even PHP some hidden bug.
The <section class="col-2 product-photo"> should have no margin from it parent. And it has not. But It is loading like has margin-left from parent.
Does someone know what is the problem?
Use this css to fix
.limit-big.center {
overflow: hidden;
}
It looks like you have some white-spaces in there. You can fix the problem by using this, on the parent div (.wrapper.limit-big):
font-size: 0;
It works for me on Firefox + Chrome
But next, you'll have to fix each font-size for children content.
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/