Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
i am using ASP.NET MVC 4 version and Microsoft.AspNet.Web.Optimization '1.1.2'
after minifing this media query:
#media (min-width: 1025px) and (max-width: 1599px) {
#circles_inner {
width: 1080px;
margin: auto;
}
}
i get this css:
#media(min-width:1025px)and (max-width:1599px){#circles_inner{width:1080px;margin:auto}}
the space is omitted before
and
tag, the new chrome version on mac doesn't understand it.
This is actually a viable update for Google Chrome. It is just being more strict on the syntax of media queries. A solution for MVC projects can be found here: http://i-skool.co.uk/net/mvc/mvc-bundling-and-minifcation-issues-with-google-chrome/
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I've been looking for ways to make my web designs as responsive as WordPress, as I've seen with WordPress the content grows and shrinks as soon as the window gets resized even into extremely small windows like 100px width windows, seemingly without many media queries. Is it possible to make a site this responsive with just pure HTML, CSS and Javascript?
If so, how?
You can control this responsive resizing e.g. with the media only screen and max with properties via CSS and then adapt the CSS code to fit your needs. Thats a quick and easy start in responsiveness. You can have a look here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
font-size: 16px
}
}
#media only screen and (max-width: 400px) {
body {
background-color: lightblue;
font-size: 14px
}
}
There are definetly way better options, but this one is very simple.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I have my whole site responsive but the data i have copied from the vendor site is not responsive i dont know why i have now copied 200 products and not willing to delete and do the work again.
Can anyone guide me my site when viewed in mobile the data gets outside the screen and is being cropped rather then being mobile friendly.
Link is : http://octa.pk/product/unifi-voip-phone-executive-ubnt-unifi-voip-in-pakistan/
I found that your description div has Width in element style, which might be coming from Javascript. An Easy and non-tested fix would be adding below CSS. ( Note: It's example CSS that fixes the main issue. )
#media only screen and (max-width: 600px) {
.comContent {
max-width: 100%;
}
.comProductFeature__content.col--lg12 {
max-width: 100%;
}
.js-waypoints-center.row.comProductFeature.comProductFeature--center.unifi-voip-executive-scalable-system-management.js-animate-slide-up {
padding: 0 10px !important;
}
}
Check fix width here
https://nimb.ws/WHI1GY, Anyway, If you have used the same classes to all 200 Products this will fix it.
If you have copy-pasted these HTML from somewhere, You will have to go through all of the product pages and need to write more CSS code. As Above code is just an example to fix it.
Hope, This helps you.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I have a margin variable in SASS like:
$space-xxl: 8vw;
I'm using it with elements like
.element {
margin-bottom: $space-xxl;
}
This works fine because the margin depends on the screen width. I need a fallback for older browsers, is this the best way to do it?
$space-xxl: 8em;
$space-xxl: 8vw;
No, I think the fallback needs to be in the element itself, because SASS variables will not be read by the browser after you compile them.
.element {
margin-bottom: 8em;
margin-bottom: $space-xxl;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I can not understand why does not work property css
#media only screen and (min-width:974px) {
#bg_top {
background:url(../img/bg_top.jpg) no-repeat center top;
}
#left_column {
float:left;
width:22.4%;
}
}
Everything written is true, but on the site, this property does not work. I ask you to explain what my mistake.
The DOM doesn't see your condition, only the last (
#media only screen and (min-width:973px) and (min-width:973px)
)
In the row upside, you used the wrong syntax.
The correct syntax comment in css is:
/* ÐœÐ¾Ð±Ð¸Ð»ÑŒÐ½Ð°Ñ Ð²ÐµÑ€Ñтка */
Perhaps the wrong code invalidate your condition. Try the correct syntax
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I would like to get rid of the large gaps of wasted white space between the two shaded lines for all pages of my mobile site.
Im using #pageWrapper { margin-top: 30px; } for the spacing on my desktop version, but maybe this is not the ideal way? I was asked to delete it, but then it messed up the spacing for desktop view.
my site is http://jeffreydowellphotography.com (im sorry if its frowned upon to post my site link, but i dont know how to show you otherwise) I'm a noob.
You need to apply the mobile styling within a media query:
#media screen and (max-width: 800px) {
#pageWrapper {
margin: 0;
padding: 0 20px;
}
.sqs-layout .sqs-row .sqs-block:last-child {
padding-bottom: 0;
}
}