I am creating a responsive web site using Bootstrap.
The page is simple, yet there is a need for different sections on the same page, each section having a height of 100% screen height, så linking to a section anchor displays that section in 100% height and width. Width is no problem, but having multiple instances of height doesn't stack. Any tips on this issue?
Found a solution - put this inside a jQuery score where you listen on resizing/load events.
$('page').css('min-height',$(window).height()+'px');
Where page is the div section you whish to target.
Related
I have a footer styled for my Wordpress site, which is not appearing to reach the full width of the site on mobile. Also, I am always able to scroll width ways, as if the site is wider than the mobile viewport. This only happens on mobile portrait, not on desktop or tablet.
I have all widths set to 100% (the header, the body, the footer and several others) but it seems the footer width renders as 1333px width whereas the header and body widths render as 1349px (as in inspect dev tools on laptop).
I have no fixed widths for any elements set in pixels of over 300px.
The footer is placed outside of the main and the main container but within the body.
I don't think any of the elements within the footer are the problem, as I have removed them and replaced them but the same problem still exists.
Photo included: Gap to right of footer
This problem maybe because one of your HTML tags on the entire webpage (out of the footer) is bigger then the screen
This problem not from the footer,please check the other parts of the webpage
Hi Hazem and thank you for your reply again. Update: I now know what was causing this problem. A left margin set in pixels on my content div that was set to 80% width was adding to the gap to the right of the footer, but only on mobile view. I then realised that my media queries were not working but I have now sorted that out, hence I have sorted the problem.
Thank you for your help.
I'm using Drupal 7 and Omega 3. The front page of my website needs an image that covers only the top half of the page, and it needs to expand to full width regardless of the browser size. I found that I can do this by creating a delta for the home page. When the grid is set to fluid it will allow the image to use the entire wrapper for the branding area. However, setting the grid to fluid causes using the mobile menu instead of desktop menu.
How can I either stretch the image full width in 960 OR use the fluid grid and have the desktop menu appear rather than the mobile menu?
Try to use "vh or vw" if you need manipulation with browser size.
Try to use "background-size: 100%;" on 100% pass needed value.
On drupal if you are using module for output different menus and using different templates double check your conditions.
Try to check your #media query's in css on width size for this menu.
So I have a design and it has multiple 100% browser width images down the page. I tried creating a few divs down the page and setting them to absolute position (even though the parent and following child were set to relative) but the text is floating behind the image.
I've tried a few other things and tried searching for an answer on here (without using jQuery) but I just wanted some more clear insight into how best to approach this. I have attached an image sample below:
The closest examples I can find usually only have 1 image at the very top of the page.
I have a similar problem as Stackoverflow.com web site has. The problem is width a banner above the content or body of the web site. I want to be able to reduce the width of the browser page but keep the size of the banner no matter what resolution is running the browser.
Example, if you reduce the width of this page you will see that a scroll bar will appear so you can move the page to the right and see the content hide. However, if you look at the banner the banner will have the new width that was reduced the page.
If i understand correctly may be you can define min-width in to the body. Write like this:
body{
min-width:975px;
}
It's mostly happened when the element have auto width & his parent didn't have any width define.
I am using Struts tiles. I have a header, menu and body. I want to have scrollbars for the menu section only. I am getting scrollbar for the whole page but want it just for the menu section.
Sounds like what you want is a scrollable div. Take a look at the following link from w3schools which provides code and an example of this very problem.
CSS solution by w3schools
Example, which you can modify, by w3schools
In the example, try changing the width of the div to 100% instead of 100px to have it be the entire width of the page.