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)
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 trying to convert a poorly designed template to a responsive design, found here:http://www.crhinc.com/about-mobile.html
Im having an issue where on desktop browser sized to mobile the template looks and works great, but on android and iphone, the page is larger than the viewport. i know i must be missing something, but as you can see, i have outlined the elements just to get try and see if i can find out whats in there that is stretching it outside the viewport and cause mobile phones to scroll from side to side but not desktop browsers.
i set the body up for 300px width just to see if i could find the rogue element, but put it back because it did not work. there are a few tables in the content, but all set to 100% width.
for some reason, it almost looks like the width in the desktop and on mobiles or not actually the same.
Jeff
Do you actually think it is the viewport? Do you have the viewport set with the right content?
Maybe this link could help.
Or is it just the CSS? In that case I would recommand you searching for width and such. Trying to find big numbers..
Setting a specified width should be for specified screen sizes. Otherwise make it max-width.
So I have a responsive theme and I want the home page to have a few columns that stay centered next to each other while on the computer... but when on the phone I would like them to go one above another... while each still being centered.
Thanks
Can you send the link to your page or set up a codepen snippet may be?
Also, for using on mobile and making them show better, use a width like, say, 31% for each div, with 3% margin on right of each, and make all
float:left
so that it shows better on mobile, and then for lower resolution media queries like, say , 480px or lower, use
width:100%
for these divs. So that they show perfectly on mobile devices with appropriate widths.
Hope that helps.
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.