I am designing a website but when I view it on mobile view the carousel doesn't show with 100% width and also the nav off sets a bit.
Heres a picture.
http://oi45.tinypic.com/30dbh91.jpg
My code is pretty much the base Bootstrap CSS and I can't figure how to fix the mobile view so it will show properly with .collapse.
The problem is not with the carousel, but with the navbar, it's too wide.
I could not figure this out until I saw the website URL in the lower left corner. You really should have attached some relevant CSS to your question and maybe a link to the site. Providing an image as a reference is not enough in most cases.
Add this in your CSS: (on line 45, which you left empty)
.navbar-wrapper .navbar {
width: 100%;
}
Related
juniorgoldreport.com is the website I'm working with. On regular desktop view its fine, when I shrink the window down smaller and smaller it seems to act responsive and it's progress. It is being made in wordpress.
When I view it on my smartphone, (LG G4), there is a huge white space to the right of the website and I cannot figure out why. I've been using inspect element via chrome to trouble shoot, but being on a cell phone I dont have that option so easily.
Does anyone have an idea?
Here's an image of the issue when you search the website on a mobile device:
Along with that too, if you guys easily know in my header my logo and my social media/subscribe button are really difficult to align center so its even on both side and they're aligned vertically.Any hints or ideas on this one? I'm much more concerned with the mobile issue though.
Looks to me like it's
.page { overflow: visible !important; }
in line 3308 that's causing the issue. Not sure what purpose that's serving, so you can take it out, but it might cause other issues.
Remove left: 50px; from .site-main .sidebar-container and the gap should disappear.
thank you for your support. I have created one litte bootstrap page.
I have only two little problems. The logo position on the desktop browser is different to the position on the mobile device (iphone).
i found out that if you change the css code "bootstrap.min.css" from the container-fluid - padding-left:15px; to padding-left:0px; the logo will be at the correct position on the desktop browser but on the wrong possition on the mobile device.
sample image
do you have any ideas to solve this problem?
The reason why you are experiencing this is because twitter bootstrap utilizes media queries. A media query essentially allows for a css class or id to have differing stylings for different screen widths.
To fix this you could go in and alter every media query in the minified code to fit your requirements. A better solution however, is to write your own css in a separate file that over rides the bootstrap.
Example
So here is a div with container fluid
<div class="container-fluid example">
// your div content
</div>
Here is your css that will override the padding left.
.example {
padding-left: 0px;
}
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
Working on http://thecraftedgarden.net. It has a bootstrap fixed navbar set up.
For some reason the mobile button is off the screen, the navbar is too wide on mobile devices. In order to duplicate the issue you must use a phone android or iPhone or you can use device mode within chrome. It does not occur in chrome if you just size the window down. Its as if the code for the mobile menu is outside all the divs and body if you take a look with developer tools.
I am almost certain the issue is caused by the bootstrap.css style sheet.
Here are some troubleshooting steps I have taken.
I replaced the entire block of code with the code from getbootstrap.com's fixed navbar example http://getbootstrap.com/examples/navbar-fixed-top/, and the issue still occured.
I have a second style sheet additions.css, and I removed all the styles applied to the navbar and logo and the issue still occurs.
If someone could help me identify what I messed up within the stylesheet or help me decide which lines to replace that would be very helpful.
ina a tag <img src="http://thecraftedgarden.tlchatt.com/img/The-Crafted-Garden-Logo.png" class="logo img-responsive">
try to remove
.pull-left {
float: left !important;
}
and set:
.logo {
margin:0;
}
I just started debugging my ASP.NET website on my android and noticed that the fixed navbar does not grow/shrink when I zoom in/out. Instead it always shows the top-left of the navbar and the navbar stays the same size.
If I switch to static navbar then it scales perfectly when I zoom in/out. Is this a known problem or have I missed something/done something wrong?
Is there maybe a way to make the navbar static on cellphone only? and fixed on desktop?
I don't have enough reputation to comment on your question so I have to post this as an answer.
Have you tried using media queries that change the height of the the navbar? Have in mind that you might need to use additional media queries for the items in the navbar, e.g. input, buttons, text size etc.
#media screen and (max-width: your-desired-width-in-px) {
#id-of-the-navbar {
height: desired-value-in-em/px/%;
}
}
One quick way of doing that could be to use media queries