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.
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.
I apologize if this is not the correct community to ask, but I believe this has to do with HTML so I'm asking here.
I need a small banner with credit card icons (21px high).
I made it in PS and resized it to 21px height (auto width), but I wasn't satisfied with the sharpness.
I now load the full image in HTML and using height and width image tag attributes resize it to the same size I did in PS, but the result is much better.
1) Resized with HTML
2) Resized with PS
Chrome developer tool shows that both of the images are the same dimensions.
Why is there such a difference?
Browsers just display it as it would be 21px high, but higher dpi screens may use the full image to make it sharper. As in the screenshot you shared, both rows are actually ~90px high. Height doesn't actually resize the image itself, it just stretchs it to a smaller area.
Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page.
From w3schools
On my page I don't use any viewport settings.
I'm just using 25% left and right margin for the whole content of the page. The problem is that when I visit it from a mobile device the width matches the width of the phone screen and with 25% margin it becomes very ugly. Just some text in the middle.
What I want to do is, make the page to does not fit the mobile screen. I want to keep it the same size. Like the most of the pages are.
How can I do that?
what mobile device you are trying to archive?
25% left and right margin it is very relative, per sample: 25% margin in a iphone looks one way 25% margin in a tablet looks complete diferent too.
you need use CSS3 Media Queries
try read about
https://www.w3schools.com/css/css3_mediaqueries.asp
you can test in chrome using: Test Responsive and Device-specific Viewports
https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports
I hope this can help you.
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 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.