I've been trying to fix the width of a mobile view. The below linked page displays correctly on most devices (more than 400px wide), but has a margin on the right side of the header on devices with less than 400px horizontal, like the Iphone 6, Iphone 5 and Galaxy S5. The html element says to be the same width as the screen, but when hovering over it, the visual indicator displays otherwise.
I've tried hiding elements to see which element is the problem, but I have not been succesful in finding the problem. I'm hoping one of you might have some insight in the problem at hand.
Screenshot of the problem:
In this screenshot the header is not full width, while the content is. So the problem seems to be in the header somewhere.
The page is https://www.matrastopper.eu/bestellen/.
I'm assuming some part of the page is scaling problematic on small screens, but I can't find which.
change this width
.no-columns .box.right {
background-image: url("/media/layout/box-right.gif");
width: 380px;/* change this width */
}
this css
https://www.matrastopper.eu/css/screen201410.css?
line no 836
Related
On some mobile devices such as iPhone 5C my tables on my web page are half way off the page. How can I change that so my page width will not get any smaller than the minimum width of my table with CSS.
I have tried shaving as much space as possible but I can't seem to make my tables any smaller for mobile.
(mobile site [go to bottom of the page and select mobile version]) http://mobilereactor.co.uk/shop/mobile-phones/samsung-galaxy-j1-white-deals/
Tables in question are in the tabs. Try resizing the page width in your browser as small as possible and you will see the problem.
As you can see in the image page is able to resize past tables minimum width.
This prevents the table content from bursting beyond the confines of its parent container, as in your screenshot.
#upgrades-datatable_wrapper {
width: 100%;
overflow: auto;
}
Screen sized to about 300 pixels
I am building a website for our studio and i came to a problem. That when i view the website on the mobile device i get a very strange gap on the right.
The website is here: www.rawstudio.ee
And print screen. - http://rawstudio.ee/img/ptscren.PNG
Second issue that i have is that when people who have wide but not high screens with aspect ratio for example 21:9 come on the website the logo goes very down and is not on the centre of there screen. The logo does not move in relation with the aspect ratio and is displayed to low. How can i fix it?
This is due to your media queries not catching the logo when it reaches a certain size.
You just need to make a slight amendment in the css for the logo once the page reaches 370px or less and also to its container.
#logo {
width: 100%;
}
#media (max-width:370px) {
#logo img {
max-width: 100%;
}
}
the strange gap is caused by the logo image, it's too large.
I suggest responsively resizing it with #media.
You can debug for mobile devices using google chrome's Device Mode
Image
As for the second part of your question, if you increase the margin-top to 50% of the #logo img tag, again with (multiple stacked) media queries, you'd probably get the result you want, but I don't think it's the correct way to do it.
I have a website that I made (without bootstrap or any or that stuff, and I am having an issue trying to scale everything down for people with a smaller screen resolution. basically I'll want it to detect the size, and apply appropriate CSS classes to elements to scale everything down if under a specific width. Right now I am just trying to build the CSS classes, and I am having some difficulties. The closest I've gotten is shrinking all the content down using:
transform: scale(.75);
That works awesome on the actual content for resizing, but I'm left with a large padded field around the content. a bit hard to explain, but what I want is for the content to shrink, but the divs to still be 100% of the browser (so if there is a smaller browser it fits nicely without this stupid large padded area around the content)
Here is how it normally looks:
image!
and here is how it looks with the added CSS transform:image2!
Any ideas for how to overcome this would be greatly appreciated, Also note I really don't care about my solution not working in IE9 or lower!
The basic output that I want is the equivelent of shrinking the browser zoom to 75% if that helps..
Depending on how your CSS is written, something as simple as this could work:
#media only screen and (max-width: 600px) {
body {font-size: 85%;}
}
If you have divs with em widths that will shrink their width, but you could change that via the media query above, perhaps setting their widths to 100% etc.
I have a problem creating responsive design of my website. When I resize my browser window to specific width the header dissapers and only body part shows up. Here is the link to my blog website: http://alpha1.dentalblog.az/home/ when resized it won't show you the menu and header logo part. (tablet size or mobile size). Any help is greatly appreciated.
In responsive.css, you have this style:
.hidden-phone{
display:none !important;
}
Specifically called when the page is less than 767px.
Line 180 you need to remove or change.
I have an HTML page that is using Bootstrap to show a weather forecast. This page is ultimately going to be shown inside of an iframe, so it has fixed dimensions. When the width is >= 768px, I want the images to show horizontally. This works fine when you make the browser wider. When the width is <768px, I want the images to stack themselves and shrink so that all of the text and images fit within the dimensions of the iframe. This is where I'm having trouble.
Here's my fiddle. I've used a parent div with fixed dimensions to simulate the iframe, and set its background color to show where the content overflows its parent. What should be showing is the day, followed by the image, followed by the high / low temperature beneath the image. This should then be repeated for Saturday and Sunday. Instead, the content is overflowing its container and being cut off. Also, the text is not showing in the proper order. I want to fix this while still ensuring that the horizontal images don't break when the browser is wider.
It's a bit confusing for me i guess as I'm still unable to understand your question completely. But is that what you are looking for?
http://jsfiddle.net/ALkKB/15/
#media screen and (max-width: 768px) {
#iframe{width:100%; height:auto;}
}
I appreciate all of your help San. I ended up eliminating the use of Bootstrap and just implemented my own CSS media queries based on the orientation of the iframe. I also had to use some Javascript to calculate how much room was left for the images once all of the other data was loaded and displayed.
Thanks again.