I have a website but when it is loaded it is too big to fit on the screen. If I adjust it to fit on my 17" laptop, when I test it on another laptop it is still big. Is there a property I can set so it is automatically adjusted to fit on the screen so no scrolling bars appear?
You can achieve this by using relative measurements instead of fixed ones.
Related
I have a site that still uses Drupal 7.x. I have a top banner that works fine on a large screen with greater than 1100px. However, that same banner will not work on smaller screens, especially not on smartphone size displays. So, if I put the banner into a block with an image tag, how can I change the source image for different display widths?
I tried using a percent width and media queries for the different background images. I haven't found a way to style the background image so that it resizes as a percent of the viewport. It will change the background image based on the media queries but I cannot get the alignment or the percent width of the background image to change with the change in the width of the viewport.
Thanks in advance for any advice on how to manage this issue. Maybe there is a module that handles changing the content of a block based on the size of the viewport.
If the banner doesn't fit on your smaller screen, try using background-size: contain or background-size: cover.
It should be possible to archieve this using CSS only, without the need to have different images in all media queries.
Ok, I can't seem to figure out how to do this for the life of me...
I have a layout that is 100% responsive. But I am comparing some products side by side on a specific page. So I have the content responsive but can only get so small. So I want my center container to be able to fit normally which it does but set a min-width of 767px. Once it hits this size the rest of the layout should still stay responsive and shrink with the browser but the content should stay at 767px and its container should have a scroll bar. All the rest of the site needs to stay with size of browser but just this container should have a slidebar and not shrink smaller than 767px. Does anyone have any idea how this could be done??
try to use the css media queries to perform the responsive options as same as what you need.
I 've created a site using Dreamweaver, and all my images have absolute position with % metrics. it expands proportionally on wider screens, but everytime I try to resize and shrink browser window it just becomes a mess with all the images fallen in one narrow window. How can I rebuild my design so it shrinks in a browser window in a way that when it is too small for an element, it just wouldn't fit. Do I have to use fixed pos-ing or any other type of pos-ing? Whats the usual way web designers do the sites?
P.S. my site contains text and abs. images, as well as fixed image that scrolls with the screen. What should I use to keep it that way but make a decent view in all screen sizes?
Use media queries or place a min-width on either the body or the element in question. For example placing min-width:900px on the body will stop the entire body from re-sizing below 900px width. (Note: That is not the responsive way to do things. Media queries are a much better practice)
Some of my customers are complaining that the website I put together using bootstrap is too big overall when viewed at 100% in Chrome. From everything to the size of the nav bar, to heros/containers/etc..it's too large at 100%.
How can I reduce the overall size of everything?
When using a fixed width layout nothing should change size when resizing the browser.
I want to have an image that has to cover the entire screen or at least one of the sides so that it keeps its aspect ratio.
How do I do that considering the various screen sizes and DPI?
FlexGlobals.topLevelApplication.screen
returns the screen rectangle, and
FlexGlobals.topLevelApplication.applicationDPI
returns the DPI of the application.
But in Flex you can simply set an s:Image control's width to 100% of the view, then it will cover your screen. (and dont set the height, Flex will figure it out for you)