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
Currently on our company website, there is no max width set. Therefore, no matter the size of the screen you're looking at it on, it will try and extend to that width. I would like to change that so it stops expanding at a certain max width -- say 1600 pixels wide.
I hope that someone can assist me with this code.
http://visualicreative.com/industries/non-profit/
You can try adding this line in responsive.css (last line):
#page, #main { width: auto; max-width: 1600px; margin: 0 auto;}
It will basically set a max-width and center the #main and #page element.
Seeing the code on your website, I'm not sure that will set a max-width to all your website. It's a really choatic piece of code.
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 4 years ago.
Improve this question
I need some help here. My final project is due tomorrow and the mobile responsive view of the app is completely off. I don't know how else to explain it other than just giving you the link to the URL.
https://venpresath.github.io/FinalProject/#!/home
It appears that the animation that I put onto the spinning record is making the width of the screen larger than the background is.
I tried overflow: Hidden; but it didn't correct the issue.
One work around is to hide the overflow of the record, something like:
.homeContent{
overflow-x: hidden;
position: relative;
}
Try placing overflow: hidden; directly on the body tag, this should ensure that whatever happens in the content the body shouldn't scroll horizontally.
you can use transform scale and transform origin css. please add below css. this is the demo http://recordit.co/UK63B2vKiR
.homeContent{transform: scale(.8, .8);}
body{background: darkslateblue!Important; overflow-x: hidden;}
*{max-width:100vw;}
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 4 years ago.
Improve this question
On this website I would like to fit the picture for the entire div width.
(If you scroll down you'll see the blog section)
As you can see from the picture there are some white space on left and right.
How can I achieve this?
Note: I can't edit the HTML structure of the website. I can only work via CSS or JS.
Many many thanks
You only have a max-width: 100%- So if you set width: 100% it'll work, like so:
img.scale-with-grid, #Content img {
max-width: 100%;
height: auto;
width: 100%;
}
As can be seen here (updated css in chrome devtools.)
Just give img.scale-with-grid, #Content img : width:100%
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 6 years ago.
Improve this question
so im trying to make the first wide box under recent promotions (at the bottom) have a a bigger height than the rest of the boxes, however nth-of-child is not working, I just need it for that first wide box. here is the code:
#listify_widget_recent_listings-2 .job_listing-entry-header:nth-child(1) {
height: 400px !important;
}
When you remove the :nth-of-child it makes all the boxes bigger as expected in that widget so I am not sure why its not working for the first. Help!
please try this
#listify_widget_recent_listings-2 .job_listings li:nth-child(1) .job_listing-entry-header.listing-cover.has-image {
height: 400px !important;
}
comment please if i miss something
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 an image in my site which it's height is bigger than it's width.
The problem is that in small screens the image is very tall and I want to limit it somehow and set the max-height to be the height of the screen (responsive).
I'm using Bootstrap so I used .img-responsive class but it doesn't work.
Here is an example: http://jsfiddle.net/dqsLt4sa/1/
Thanks.
You can use the vh unit for that.
max-height: 100vh;
To specify that no image should be larger than the screen use the following CSS
img {
max-height: 100vh;
max-width: 100vw;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I took a WP theme and have customized it for my needs. I have got into a issue now with CSS.
It looks fine on full size
However when resized or when viewed on iPad, the header is getting distorted. As you can see the RSS icon on the top right has gone past the colored header.
Any pointers in this regard would be appreciated.
Please let me know if you need some more information.
In case you need to check with Firebug/other inspector tool, here is my site
If a block overflows, it does not scale the parallel ones. Putting div#header div#menu and div#footer into div#content parallel to the container should solve the issue.
CSS alternative way:
Add floated fixing to the container and all childs, in this case:
#top-overlay, #header, #menu, #content, #footer {
float: left;
min-width: 100%;
}