I'm making some chevron style links for my web application, and have followed the tutorial here (breadcrumb links with css) in order to add them to the site. This all works fine. However when I start to shrink the size of the page they rapidly start to pile up on top of each other, and look crap. They remain the same width - whereas I'd like them to gradually shrink in width (and perhaps increase in height to accommodate the contents) as the page size shrinks. Ultimately I'll put in some that point down specifically for the mobile user.
Is it possible to tell bootstrap to shrink a block element or to scale it down as the available page width decreases?
I dont know, but maybe give the block this:
height:auto;
You only need to find the right class in bootstrap.css or bootstrap.min.css.
But if you want to edit somthing please use bootstrap.css and not bootstrap.min.css
Related
I want to align centered an image and a short text, relative to viewport.
I would like to have the image followed by the text in the same line when it is space enough, like landscape view.
And when isn't enough space for both in the same line, I would like the text to slide under the image, and both to be still centered!
Any ideas will be welcomed.
Your request is the basic fundamental reason why the whole area of responsive web pages exist, and mobile first design methodologies ... this is a very very generic question, you need to be more specific ... are you trying to achieve this just with your own html and css ?? are you using any frame works ?? This is standard business as usual for frameworks like Bootstrap3.0 and jQuery. If you have not heard of them, then I would recommend stop trying to re-invent the wheel, get a crash course in Bootstrap3.0 (particularly in the scaffolding, this is how you achieve responsiveness, you can specify css settings for different screen sizes, what is the minimum width of an item, and what to do in the event that this minimum width is crossed ... slide one item under the other ... items can be divs, viewports, ANYTHING)
Am designing a site and am quite new to it. So my question may be naive. There are two pages index.html and aboutUs.html.
For this eg, i have removed most of the invalid contents with regards to my question. My question is related to how can we dynamically change or handle the length of the page based on the content. In my case, index.html does not have too much text, so the UI looks fine, however aboutUS.html has too much content, and the content overlaps with the footer. How do I handle such scenarios? For reference, I have added some images below, the first image has no overlap, but the second one has. You can find the source code over at GitHub (https://github.com/vnmshenoy/global)
Images
Your problematic classes seem to be imageDiv and overlap.
Both these have defined heights.
When the content inside the element is larger than this height, it is visible, but is actually spilling outside that position, and so appears on top of the next element. If you set a border on these elements, you will see what I mean.
You could always use the overflow:scroll style here and scrollbars will appear when this happens, but you'd be better making your design a bit more fluid with regard to heights, especially if you plan to make it responsive.
I have an image carousel on my site's homepage, and sometimes a few of the images have slightly higher height and width. This causes the page elements, such as a list of test items below the carousel, to move around as each image in the carousel changes.
What is the best solution for stopping everything on the page from moving around? Should I enforce the sizing of each image on upload from the CMS? Should I force the sizing in the markup? Is there a set of CSS rules to apply to the Bootstrap Carousel to conform the images to a certain, fluid, responsive size, such that each image change results in nothing on the page moving around due to size change?
Todd, Hi there. Have a look at this post here to do with Bootstrap carousel.
There is a Fiddle with full code for you to use.
I have 4 very different sized images in a responsive carousel. The carousel does not change size when each image slides in.
You could use this to get started to have a responsive carousel.
Try resizing it to see.
Hope this helps.
I have an ASP.net 4 app with a bunch of pages, all using the Site.Master as the primary layout which is a colored background, border, menu at the top and a gif in the bottom right corner of the border.
I've positioned everything using position:absolute and just set all of the elements in the site.master and the individual elements that appear on each page by using style:"left:100px top 100px" etc
So when you launch the app in normal IE mode everything looks perfect, however if you go full screen or you minimize IE, everything goes completely out of shape and all over the place.
What do I need to do in order for it to be consistent no matter whether you're in normal IE/Full screen/Minimized? Do I need to change the way I have used style:position tags on all of the elements or is it something else that I need to do?
My solution to this was to put a
div style="position:relative;"
inside and at the start of the BodyContent of each page then use absolute positioning on each of the elements which keeps all of them within the BodyContent border and shifts them properly when the browser is minimized or full-screened. Is this a good approach? It seems to have solved the problem I had but I'm concerned it may cause more problems I'm not currently aware of?
Page is not holding your settings because the width off page changes when you change browser size.
To make things all the same no mater what is the size of browser window set this with off body element.
Something like this:
<body style="width:1024px">
I have a layout of fixed-pixel width (960px) with a navigation bar that has five items in it. The width of the nav div is set to 100%, but its content ends up taking exactly 960px. The navigation is a bit complicated with a set of drop-downs and links. The problem is that zooming the page out at all causes the navigation bar to get clipped and move on to the next line.
Anyone have tips for how to avoid this?
Thanks a lot.
The only sure way I've found to do it is by defining all padding and widths using 'em'. This means everything will be relative to the font size and expand/contract smoothly as you change font sizes in the browser.
Here's a simple template I put together years ago that does the trick.
Since most browsers now zoom instead of only change font size, it's not as much of a concern, but older ones like IE6 still need a little help.