I have an issue with website on mobile devices view...
To be much worse, on every mobile device, site is displaying exactly as in desktop view (this is the part which i need ),but problem is i can't debbug and find css error. The problem is white space on right side of website, and its visible in slider part-slider is not full screen width, as whole website too.
you can see white vertical space in screnshots here screenshots
Website is Site link, and here are screenshots of my problem
here is your problem
<header id="header-v5" class="header clearfix" style="width:100px">
<div class="wrapper header-v5-wrapper clearfix">
<div class="sixteen spans">
<div class="logo" i="">
<div class="slogan">
</div>
</div>
the header part is not responsive, for example the class="sixteen spans" has a width:960px while being previewed as a 320x480
Related
I have designed my own website using HTML5, CSS3, Bootstrap 4 and SCSS with some small bits of JavaScript and JQuery. The website looks fine on the desktop but on mobile devices there is excess white space to the right, despite me setting overflow to hidden on all device sizes.
I have used developer tools to inspect all of the elements and can see no reason for this behaviour, however I feel it is something to do with the carousel, as it also happens on another site I have built only on the page with the carousel.
This can be seen at https://www.mediumcarlie.co.uk
I have used developer tools to try to inspect the issue, I have googled everything, I have set max-width to 100% on nearly all elements where I am able to, I have used media queries and Bootstrap variables to adjust the size of the carousel elements.
<a href="#myCarousel" data-slide="prev" class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#myCarousel" data-slide="next" class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
I expect for there to be no additional white space on smaller devices. Currently there is whitespace on the right hand side of mobile screens only on the index page
divs with class "row" in the Bootstrap should be wrapped with div with class "container".
In your case, you have a problem in the section with id = "home-heading". Use the wrapping as below
<section id="home-heading" class="py-5">
<div class="dark-overlay">
<div class="container">
<div class="row">...</div>
</div>
</div>
</section>
Try removing the margin-right: 15px; on the #home-heading > overlay-container > row
The most simplest way to do this is by adding overflow-x:hidden; to the HTML element since there are no contents that appear on the overflowing section by adding this you will not recieve the horizontal scroll.
Next is the reason why you are getting this:
In the home heading section there is a row present without the container class you need to add the container class before the row in order to sort it out.
<section id="home-heading">
<div class="dark-overlay">
<div class="container">
<div class="row">Loprem Ipsum</div>
</div>
</div>
</section>
I'm building a section with a text on the left side and a background image tied to a right side of a browser. Both text and image have about 50% width while using desktop device.
For desktop device solution, I've coded it like this:
http://www.bootply.com/xxyOcA9N5n
However, problem arises when I try to make it responsive. My preferred goal would be that the content gradually "pushes" background image to the right (out of the browser's "canvas"). In extreme case, it would look like this: Image nearly disappeared and text is readable.
Can you please help me figure out, how to solve this?
Add another col-sm-6 and place the image in there with a 100% width so it scales as the size gets smaller. You can also use media queries to define how you want it to look at various sizes.
<div class="container-fluid hp-about">
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Company</h2>
<p class="large">We are doing this and this and it is
awesome because this and that. Yeah and also this and that.
And also that.</p>
<p>More about us ยป</p>
</div>
<div class="col-sm-6"><img src=
"http://i.imgur.com/HGp1ot6.png"></div>
</div>
</div>
</div>
I am new to HTML5 and I have created a website with home page having few icons with absolute position, fixed top and left values.
But when the same is opened in mobile device, I have to scroll a lot, and the images are not coming in center as expected.
Please let me know your inputs for same, as I am new to HTML5 and would like to learn different aspect.
Thanks & Regards,
Mrudul
I'm going to take a wild guess and say you're using bootstrap to make things responsive.
If thats the case, you can simple add a class to images to make them scale correctly..
<img src="http://placehold.it/1920x400" class="img-responsive" alt="">
You can copy and paste this in your editor to test it.
This way, if the screen gets smaller, so will your image.
EDIT :
Also, if you want the image to be contained in a wrapper you can use the following structure :
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1920x400" class="img-responsive" alt="">
</div>
</div>
</div>
I'm trying to implement a fixed nav bar, but after certain screen size (~width:989),
the nav bar moves down. It doesn't work on mobile either.
Image:
The navbar is completely stuck to the footer instead of staying on top of the page.
You can check the code at: http://www.lostsavings.co.il
You have a few other issues, but the major issue is that the nav-fixed-top content is at the bottom of the page right now... in other words, you have:
<div class="container"> content here </div>
<div class="navbar"></div>
<div class="footer"></div>
Move that navbar to the top of the natural document flow, as if you were using no bootstrap, jquery, etc...
<div class="navbar"></div>
<div class="container"> content here </div>
<div class="footer"></div>
You'll have to fine-tune quite a few margins, etc... and I see a few !importants that could be getting in the way, too, but I'm guessing some of that has been part of your attempt to troubleshoot this. Making the above change at least made the navbar appear at the top for me.
i am trying to realize a layout with bootstrap.css. It is especially a main view with a right sidebar. It looks great on the desktop, but i am trying to remove the sidebar when i have a mobile view.
Currently my layout looks like this:
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
Main view goes here
</div>
<div class="span3 visible-desktop visible-tablet hidden-phone">
Sidebar goes here
</div>
</div>
</div>
So when i have a mobile view, the sidebar disappears. But the main view still has a span9 class, causing the whole view having some whitespace to the right. I am currently experiencing this on an iPhone 4 with mobile safari.
I am no css guru and i mainly work on the backend of webapps, but this time i just want to do it right, because it is for my personal blog. You can check out what i mean with this "whitespace" at my blog. I know that the navbar isn't pretty at all now, but this will be the next thing i'll fix.
Check it on www.responsinator.com
I guess there is no such white-spacing to the right. Moreover row-fluid class of bootstrap converts every child span class to full width when the site is opened on any other device except for desktop. So in any case, the width:100% is assigned to span9 when you open it on iPhone4.
There seems to be a little space on the right cuz of two reasons probably:
1. Text is not justified.
2. container-fluid adds a padding of 20px to the left as well as right.
Hope it helps. :)