Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I am planning to redesign my site using the Flexible Box Layout Module to make it responsive since it seems to be the winning layout method for responsive sites.
But what happens if an image in one of the boxes are wider than the viewport? Can I automatically scale down the size of the image if the image is too wide for the viewport?
I haven't been able to find solid info on this topic. This may be a basic or bad question, I am not sure.
Yes, as following:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
(although I'm not sure if necessary, since mobile devices scale down images themselves)
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a question:
How to make a responsive design that when I resize the window the design not change at all(width, height, positions), only the window cover the design/content.
For example this website: https://www.zap.co.il/
How can I dot it if all elements are viewports and almost every element positioned absolutely to the body tag ?
For the viewports I can use SVG - It solving it, but the position ?
I want everything remain the same, thank for your help
this should make your page basically responsive
then for resizing components at different widths
`<meta charset="utf-8">` html code
#media screen and (min-width:800px){
//css code for screen widths above 800pixels
}
css code
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 4 years ago.
Improve this question
If I set img {max-width: 100%) to make a default responsive feature to all images in a website. Is it a good practice? Should I do that?
Yes, it is a good practice but only if you implement it properly through inheritance and proper CSS naming to avoid convoluted HTML and CSS.
Having a default max-width:100% for images is a good thing as it set a standard for your website that no images should be larger than the window or the container in which it resides unless specified.
This way, you can give exceptions to specific images that should be allowed a size larger than the window or for different screen sizes using size specific rules.
It is better to make use of width and max-width. If the width of the image exceeds max-width, it will be constrained to the max value.
For example, consider the below CSS
img { width: 100%; max-width: 512px; }
If the width of the image exceeds more than 512px, then the image width is restriacted to 512px.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm looking to extend the header image to be full width on a client's blog which is hosted on Wordpress.com, but it doesn't seem like the theme supports it natively. Something seems to be cropping the image automatically.
Is there any way this can be done using CSS?
http://ryanmangansitblog.com/
Thanks in advance!
this is caused because of the <p> element located in #hero .hero-content which has a max-width variable set in style.css, if you remove this rule #hero .hero-content p { max-width: 770px; } your problem should be solved, and the image should be shown full width.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I am trying to design new website but I have some problems. I am using 13inch laptop when I look at the site in my computers browser everything is fine but when I look at the bigger screen div's are shown smaller etc. Which units should I use for div's width, height and the margins ? I have already try px em and know I have made it something like this.
.tBackground{
margin-left:10%;
margin-top: -200px;
margin-bottom:auto;
margin-right:auto;
height: 30%;
width: 110%;
background: rgba(80, 78, 78, 0.75);
overflow:auto;
}
with this css it is normal at bigger screen but in my 13inch laptop it is very big it doesn't fit the screen
There's not simply one unit to be used in web design. The reason that they're all there is for variation. It entirely depends on what you want:
px - Does not scale down for mobile devices
em - Does scale down for mobile devices
percent - Takes up a set amount of the screen
It depends entirely on what is trying to be accomplished. However, these are just basic differences. If you would like to read more about them, you can visit this website (which also includes pt).
Also, you can read the answers to this StackOverflow question: Why em instead of px?
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 8 years ago.
Improve this question
Blogger has this new fancy theme that I see a lot of people using, but it seems to me to have an obvious CSS bug as the link gadget overlaps the scrollbar. Are you seeing this problem as well?
The gadget div has it's CSS set to right:0px and z-index:3000, which causes it to overlap the scrollbar on Chrome for Windows. I would think that browsers shouldn't allow overlapping of scrollbars in the first place? And if they would allow that, isn't it still a usability bug from Google?
UPDATE: Here is a link with a blog where this happens: http://www.judegomila.com/2012/10/how-to-name-your-company.html
And here is the same theme, but without that problem: http://googleblog.blogspot.jp/
you have set the overflow-y in the <div class="viewitem-inner"> remove this its on line no 1648
and try the
html {
height: 100%;
overflow: scroll;
}
also remove the position:fixed; from <div class="viewitem-panel"> on line no 1589
working
I would say this is a usability bug in the Blogger theme. A scrollbar always belongs to some element and elements can be overlapped with other elements – thus the scrollbars could get hidden.