On this Website I am developing, I am having a problem centering the content on the first media query break. The 768px size doesnt line up against the left side of the browser window and allow me to resize the window on down, something is holding it open. The page centers normally on a 960px and larger browser size, but not the 768px. Any help would be appreciated.
Removing the min-width: 980px on your body fixed it for me.
Related
I'm using media queries to properly align the header image to the container div underneath it. It looks great when in large desktop or mobile mode, however when I re-size to other sizes and change browser window it moves. Should I be setting more breakpoints and more specific ones for the media queries? I've tried also placing it as a background-image: cover but that does not seem to work either.
I have div which has height and width of 15360px respectively which is the designated area to drag my elements around. It is working fine on the desktops and laptops where the scroll bars will appear.
I have been using the media queries to work it on IPAD too, but when the site is viwed in IPAD the page gets shrinks because of the particular div which has the width and height of 15360px.
Can anyone suggest what can be done to make the Mammoth div to fit in IPAD so that page looks fine.
Any help is appreciated.
Thanks in Advance
You should play around with the viewport meta tag. See the documentation on MDN here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag.
I think you're looking for no scaling and fixed width instead of device-width.
I am using one css design and it works perfectly in full size browser but whenever screen size is reduced below 1280 px in width scroll bar goes missing and responsiveness in design gets frozen to that frame so user can not view complete site, can not scroll when on mobile devices or after reducing browser screen size. Request to please help with that. Below is the link to site where this problem is occurring
http://goo.gl/VzVmTW
You are setting your body overflow to hidden, once it gets to a specific width, so once you need the scroll, as soon as the browser renders your CSS, it will assume the overflow:hidden attribute thus removing your scrolling capabilities.
This happens on line 315 of your irms_default.css:
#media screen and (min-width:0px) and (max-width:1180px){
body{overflow:hidden;text-align:center;}
If you really need to apply a hidden overflow, try applying it only to the elements that need it to prevent such issues. A 'body' with a hidden overflow should exist only on static single page designs, to ensure the best of the user's experience.
I'm working on this website and I can't figure out how to fix the problem.
if you use a fullscreen browser window you will see it perfectly (any major browser) but if the window is smaller, it shows the horizontal scrollbar plus cuts the website on the right of around 50px.
I can't change the design to make it more easy to do.
here's the link, you can see both html and css
http://www.ircm.comunicazioneimmagine.eu/
Using fixed size layout will cause problems with different screen resolutions. You should use fluid layouts to resolve the problem.
Fluid Layout Guide
Responsive Design
If you don't want to use fluid layouts.
Put all the content into a div with margin: 0 auto and add text-align: center to the body (IE explorer compatible). Choose a background that looks nice with the page and you're done.
But if the screen resolution is less than actual page size there won't be any solution but resizing the page manually.
the horizontal scroll bar is there cause your page exceeds the innerheight of the browser... my current res is 1920x1080 and I cannot see the bottom of the page. Perhaps try reducing the size of the big IRCM at the bottom.
I need to apply 100px of top margin to a nested row in Boostrap so that the content lines up vertically with some other content in the page - ok all good when you view on a large screen. When I shrink the browser size to mimic a tablet / phone the content shrinks and collapses down - also good. However, the 100px of margin causes the content to now be placed well down the tablet page - ugly.
I have thought about using media queries to eliminate the content with the 100px of margin for tablets & phones - but eliminating content seems like the wrong approach.
Many thanks for all your suggestions !
If the content is unimportant for tablets and phones, then eliminating it is completely valid. Unfortunately, "unimportant" is EXTREMELY context dependent. However, you can just use media queries to set different styles (i.e. set 100px in full layout, set smaller or no margin in the tablet and mobile views)