A bit of background: I am a student who has volunteered to redesign a website that is used by my extra curricular robotics team. This is my first time creating and working with Bootstrap and responsive design in general and, in my opinion, everything has gone very smoothly up until I uploaded the website to a test domain and viewed it on a mobile device.
The issue I am facing deals with the width of the navbar and content on the website depending on the orientation of the device. While the device is in portrait mode (vertical), the navbar and content don't have enough space in the text, and as a result, make the page extremely long and take up a lot of space. On the other hand, when the device is landscape (on its side), the website is, at least what I would consider, completely fine:
http://imgur.com/gallery/toZYt (album because I cannot post more than two links right now, shows pictures of the issue in greater (visual) detail )
I've experimented with the viewport/initial scale of the webpage, and while that does change the navbar and content width, the navigation bar text/logo is squished in, and also looks relatively low quality. Changing the min/max-width of the media does not seem to do anything. I'm stuck as to how to fix this, and whether or not it is a #media issue or if has to do with my CSS for menu/content. I have a 125px margin for the content in my CSS main CSS, mainly for the desktop site to look nice, so maybe that has to do with something?
I tried to research this problem earlier on other posts and other websites, but I couldn't find anything that seemed to relate to my issue, and any suggestions didn't really fix/affect the website in a major way. I'm hoping that there is someway to fix this without affecting the other forms of the website (Landscape/Desktop), as well as the margin of the text/content.
I found that the problem persists on other phones (tested on a OnePlus X, iPod 5th Generation, and iPhone 6) but haven't been able to test it on tablets. If anyone has any suggestions for me that will solve this issue on the website, It will be greatly appreciated. Thanks for reading!
You need to look into CSS media queries.
There are a couple of things you should fix, including the 125px margin.
For example, that margin is way too big for a mobile device, so what you should do is:
.element {
margin: 0 15px; /* Default margin */
}
#media only screen and (min-width: 1024px) {
.element {
margin: 0 125px; /* Margin for displays > 1024px */
}
}
You can set multiple media queries that affect the same element. To build on the example above, you can have one more query # 1280px:
/* ... */
#media only screen and (min-width: 1024px) {
.element {
margin: 0 125px; /* Margin for displays > 1024px */
}
}
#media only screen and (min-width: 1280px) {
.element {
margin: 0 200px; /* Margin for displays > 1280px */
}
}
A good way to debug layouts at lower resolution is using your browser's built-in responsive view.
You can do that in all major browsers now, for example in Chrome you need to open up dev tools (Ctrl + Shift + I or Cmd + Opt + I) and click on the phone + tablet icon on the top left.
After I took a closer look at your website, I found some fixes you can apply to it in order to make it look better on smaller viewports:
1: (first remove .navbar-brand > img inline style (max-width and margin-top)
.navbar-brand img {
max-width: 200px;
margin-top: 14px;
}
#media only screen and (min-width: 440px) {
.navbar-brand img {
max-width: 350px;
margin-top: 7px;
}
}
2: Adjust border-control padding for smaller screens
.border-control {
padding-left: 15px;
padding-right: 15px;
}
#media only screen and (min-width: 768px) {
.border-control {
padding-left: 125px;
padding-right: 125px;
}
}
If this still doesn't make a lot of sense, I suggest you read up on media queries here and figure out how they work in depth.
Related
So I was working on a static website that uses only HTML and CSS. I made the website in desktop view so when screen size is more than 1220px the website will look exactly as I want it to. For selecting services I have a picture as a background and some text inside it. The dimension of picture is 420x469 px. I have a total of 4 pictures and I put them in pairs of 2. So like this (Service 1) (Service 2). I have padding of 7.8% on both left and right side and 8% padding on bottom. Currently if someone access my website from mobile, then service 1 shows with 7.8% left side padding and half cut picture. Then service 2 below it just like Service 1.
What I want is that when someone uses website from phone, they see the picture completely and no padding. and if there is enough space, then some padding pls tell how i can do that
Have a look at these Docs here:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Then you can use CSS like this
.my-class {
/* Mobile - Desktop */
padding: 10px;
}
#media only screen and (min-width: 600px) {
/* Tablet - Desktop */
/* It will overwrite the other less specific classes padding */
.my-class {
padding: 30px;
}
}
<div class="my-class">
<h1>My Content</h1>
</div>
Bonus tip: Don't work with max-width in general, but with min-width. That means you will be working mobile first.
in css add this line it will work perfectly in any screen size
.service1{
width: 100%;
height: auto;
}
Define a #media query specifically for 'phones' like this :
#media (max-width: 640px) { /*...*/ }
You may want to remove the padding/margin for any smaller screen sizes. Try like this:
#media (max-width: 978px) {
.container {
padding:0;
margin:0;
}
}
Otherwise, Try using bootstrap it works very well in Adjusting margin/padding with screen size.
On our website: https://dev.shiftdivorceguide.com/ everything looks great on desktop.
When I switch to smaller screens like tablets I get a padding to the right of the screen. When I go even smaller (smartphones) I get an even larger padded area to the right of the screen.
I am unsure if the Panic Button bar at the top may be interfering with the code of the page (.panic-button-container). I have already tried altering the CSS in the media queries. To reduce the size of the white area on tablets I changed the code below concerning the logo and navigation widths.
I changed:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 40%;
float: right;
}
}
to:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 80%;
float: right;
}
}
This helped a little with the layout but I still get a white bar on smaller screens. The smart phones are the worst. Any possible solutions would be appreciated.
Stop using floats. Use Flexbox. Too many clearfix divs in the way.
Obviously the footer is extending past the site content body as well as some other elements.
If you really want to narrow it down set this style:
* { outline: 1px solid red }
That way you see what container is over-extending and then set it's width to 100% instead of a fixed width.
EDIT 2:
Using my technique I have narrowed down the problems:
.footer-menu
remove width: 500px;
.lp-section-content row
remove all negative margin
.vc_column-inner vc_custom_1548439628787
remove all padding
So I have a website that looks great when testing for responsiveness in developer tools, but isn't centered and looks somewhat broken when actually testing it on the iPhone itself.
What would cause this, and how can I fix it if I don't have access to an iPhone (looks fine on my android)?
See site here
The padding in this rule is the culprit, when you get rid of it you will see the difference:
#media screen and (max-width: 600px)
.tg-column-1, .tg-column-2, .tg-column-3, .tg-column-4 {
float: none;
padding-left: 34%;
}
To center the elements of text-widget you can try this instead of the padding you were using:
#media screen and (max-width: 600px)
.textwidget div { margin: 0 auto; }
}
Try to use overflow-x:hidden in body in css mediaquery for mobile. There is horizontal scroll in the website in mobile view, it may be the cause of your problem.
My website looks strange on my Nexus 5 (see image below). Although I cannot test it, I guess this is the same for other mobile phones.
I guess this is because of the #media queries. However, if I try this on a normal pc with different screen widths, it looks like it should be.
Two questions:
how can I fix this?
Is there a way I can test this behavior on my pc, so I can use firebug to see the css?
This is how the #media queries look like in my css file:
#media (min-width: 600px) {
.col-lg-3 {
width: 50%;
float: left;
}
}
#media (min-width: 900px) {
.col-lg-3 {
width: 33.33%;
float: left;
}
}
#media (min-width: 1000px) {
.col-lg-3 {
width: 25%;
float: left;
}
}
#media (min-width: 1000px) {
.container {
max-width: 980px;
}
}
The .container is the white box with the shadow, and the .col-lg-3 are the product boxes (4 in a row on a normal screen).
The .container should fill the screen on small screens, and be 980px wide on a big screen. However, it looks much smaller, and it looks like the .col-lg-3 has a width of 100%
To elaborate #zazvomiki you can correct this behaviour by implementing the viewport meta tag and specifying that the viewport width should equal the width of the screen. Place the following in the element of your web page:
<meta name="viewport" content="width=device-width, user-scalable=no">
To answer the second part of your question can you test this behaviour on your PC you can use remote debugging with Chrome for Android which allows you to use developer tools from your PC to investigate the page on your phone. Then you can make live changes as you normally would in Chrome to test different ideas.
Remote debugging for Chrome: https://developer.chrome.com/devtools/docs/remote-debugging
Chrome has very good emulation tools for mobile built into the developer tools. See https://developer.chrome.com/devtools/docs/device-mode
The sub menu UL have defined widths also so this may be causing the menu bar to be forced wider that the container. Check the whitespace of the menu text as well.
I recently saw a link, on twitter, to path's new website; with.me. There's some pretty simple but neat things occurring on a with.me page, for example look at this one of Ashton Kutcher:
http://with.me/w/2275
My favorite thing on that page is how the picture appears to snap to a minimum and maximum size. When you resize the browse, you will notice that the image will eventually shrink to a smaller size in a "snapping" fashion. It doesn't resize with the browser, it instantly goes to the smaller size if the bigger one can't fit in the browser window.
How are they doing this? I've been poking around the CSS for the past two hours. I have a test page of my own that I've been trying to get this to work on, but can't figure it out.
Any ideas?
#ryan; it's a css3 media query .
if the check the link source then you saw he you it in there css
#media screen and (max-height: 720px), screen and (max-width: 850px) {
#page.permalink {
height: 454px;
margin: -247px auto 0 auto;
}
#page-container {
width: 650px;
}
#photo-container {
margin-left:-370px;
}
#photo {
height: 454px;
width: 340px;
background-size: 340px 454px;
}
}
check this
http://css-tricks.com/css-media-queries/
It's done by applying different stylesheets based on screen size:
#media screen and (min-height: 1000px) {
If you're using a webkit-based browser (safari / chrome), it actually animates between the two using a webkit animation.