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.
Related
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
I have a problem when loading the mockup of my project on an iPhone.
The problem is that on my mobile device, most 100% containers seem to have some kind of a right margin or padding, which leads to content crash.
I really think that probably this is due to "viewport" stuff, which I don't know for now, but anyway, take a look.
when seen your screenshot, Your code is up to date, when I put my image in your code then it's working fine, so you can check your image width and check css
check with this #0a1a19 url("../img/img2.png") no-repeat scroll center center / 100% 100%;
If you want to make responsive then use bootstrap and you can get from here....Bootstrap
But you are used custom css so you need to use media query for different layouts like, tablet, mobile, etc...
and one more thing if you not getting perfect layout in your mobile view then must check your media query for mobile view.
Note: always use % (not px) to give the width of any image.
.header__inner has fixed width, change width to 100% and remove padding for mobile devices:
#media <params go here> {
.header__inner, .header__inner_mod {
width: 100%;
padding: 0;
}
}
Codepen
It's far simpler to point to an example than to try and explain the problem I am trying to solve so I'll do just that (apologies to people on mobile, this won't work...)
The effect I want to achieve can be seen on VICE news (http://news.vice.com)
As you can see while resizing the browser, the aspect ratio of the image remains intact throughout certain sizes. It jumps at 1200px and again at 700px, all the while scaling both the width and the height.
Is there a way to achieve this using only CSS? My head is stuck on this one.
Thanks!
Media queries, of course.
If you look in their source code, you will see that they have 3 different versions of the same image to display at each different size (to minimize scaling). Then, by using media queries, they will display the proper one and have its width fill the page:
Here's the mobile image, for example:
#media only screen and (min-width: 43.75em)
{
.lede .lede-images img.mobile
{
display: none;
}
}
And here's the global code:
.lede .lede-images img.mobile
{
width: 100%;
}
Setting the width to 100% while not setting the height will automatically maintain the aspect ratio while resizing.
I have this page, it only has an image on it right now but since I'm pretty new to this I thought that would be enough. On a normal desktop screen, I want the image to be left-aligned. And that's how it is. But when it's in portrait mode, and the max-width is 480px, I want the image to be centered, horizontally.
My code is:
#media (max-width: 480px)
{
img
{
display: block;
margin-left: auto;
margin-right: auto;
}
}
Now, the above code works great on the computer. When my PC is in landscape mode and the max-width is greater than 480px, the image is left-aligned. And when I put my PC in Portrait and Shrink the browser window's width to less than 480px the image becomes centered.
But this does not work on my phone. My phone's width is 480px. Why isn't is working then? I don't understand.
This will help (it did for me) - http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html.
Viewports, widths and device widths are confusing - with multipliers, and other things in place - this article seemed to explain them.
What about putting
text-align:center;
On the parent wrapper?
http://jsfiddle.net/lharby/6y4E4/
And combine that with setting max-widths in the media query?
Just a thought, try having the page detect the device that is being used and run different code for desktops and mobiles? not sure how it would work since I am fairly new to this myself, but I have seen others do it.
I'm not a very talented web designer, so I'm having trouble to make my webpage stay in tact when the browser changes its size. It gets all messy and it looks awful.
When the browser is at its full size, the page looks fine.
This is how it looks like before re-sizing the browser:
And this is how it looks after making the browser smaller:
This happens only when you re-size the browser horizontally.
This is my CSS: http://pastebin.com/SfKT0Eth
I can't figure out my mistake since I'm not very good in HTML/CSS. That's not my area so I'm lacking the knowledge to figure this out myself.
I would appreciate your help.
EDIT
I fixed the problem with the sidebar and the dark content space. What I'm failing to achieve is prevent the upper menu (top-nav) items to fall down when the screen gets small.
I simply changed this in #sidebar:
width: 270px;
to
width: 19%;
http://jsfiddle.net/J3jm7/3/
Hi just i see your fiddle ... there are a few problems:
Number one you're setting the width with % this takes it in relation with the browsers size, you can set min-width and max-wdith to avoid this problem.
Try to put first in your html the box that is float:left and after the box float:right
I don't understand why you use postion:absolute for the outer div.
View this demo with your Fiddle fixed http://jsfiddle.net/J3jm7/15/
First of all you should really make a Jsfiddle with your question as with css alone I can't really see what is going on.
Now as far as I can see you are using absolute values for width in some elements. You should take a look at using % values. Also you should look into media queries through css. For example your side bar would be better if it was hidden or position below your main window when the browser gets really small width.
You could achieve something like that by using something like
#media screen and (max-width: 800px){
#sidebar {
display:none;
}
This would hide the sidebar if the browser window get resized below 800px width
or
#media screen and (max-width: 800px){
#sidebar {
float:none;
width:100%
}
This would have the sidebar get below your main window and size it to the full width of its parent element if the browser window get resized below 800px width
The media queries should of course coexist with your rest of css
Ah, I see you've added a fiddle. well if you want to keep your sidebar at 270px width you could do this with the container
.container {
width: calc(100% - 275px);
...
...
}
Very simply speaking it is hard to debug without a staging URL to look at. Anyway, your issue is because you are not using fluid development practices. Maybe try to google up how to develop fluid development. The idea is to use % and em and a base css font size. Also, you may wanna look at bootstrap3.
Looks like you are coming in on the ground floor. The best resource to getting started in this area is Responsive Web Design by Ethan Marcotte. Check it out here: http://www.abookapart.com/products/responsive-web-design