Update: I've changed over the % and made px values max-width but it's still not being responsive with images, nor is the mobile menu working.. (link to website)
I am working on a site using Bootstrap, and for some reason it is not being responsive. I have the viewport set to meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
Bootstrap.css first, then the theme.css.
I see a couple of issues:
1) Your col-lg-1 and col-lg-10 classes need to be immediately inside a div with row class, that is inside container class. Do not wrap them in modal-body either - this is stopping the responsive grid styles from working properly.
2) You should probably add some col-md-** and col-sm-** classes to your columns as well, to give better control of proportion at medium and small size, instead of just specifying the large size.
3) Take all fixed widths off your classes inside container.
If you want to make a responsive website you should stop using fixed widths. For example on your website, you have a class named ".contacts" and the image "Mazars Messenger"(add a class here and use it instead of img from my code). Try to set these properties to it and see what happens:
.contacts{
max-width: 800px;
width: 100%;
}
/*here you add your own class instead of img to affect only the image with that class*/
img{
max-width: 800px;
height: auto;
width: 100%;
}
.container {
max-width: 970px;
width: 100%;
}
And you have the borders as images under every article. You need to modify the code for those too, and then your site should be responsive.
You need to do this for your entire website. Good luck.
You are forcing some width values in pixels, for example here:
.contacts {
width: 800px;
display: block;
}
If you want it to be responsive you need to set values in percentage like so:
.contacts {
max-width: 800px;
width: 100%;
display: block;
}
Related
I am using the plugin Enhanced Text Widget in WordPress to display Javascript in a sidebar widget. The script runs and displays the info, but the content overflows outside the widget area. I want to keep the content within the confines of the widget area and I've tried a few different CSS options and nothing is working to contain it.
Site is: http://dev.northwestfiretraining.com/ and its on the left sidebar under DAILY BURN INFO.
Thanks!
Your css needs to be tweaked.
The .burn class is too wide, with a width set fixed to 320px, instead of dynamic based on the width of the container div (.textwidget):
.burn {
width: 320px;
background: url(images/burn_status_bkgrd.png) center no-repeat;
height: 250px;
}
Try changing it to this:
.burn {
width: 100%;
background: url(images/burn_status_bkgrd.png) center no-repeat;
height: 250px;
}
.burn
{
width: auto !important;
}
Add this code in your style.
I have a carousel with six images that runs infinite using Nuka Carousel
And when i see the images on the page they are stretched on the width. After looking in the console i found that nuka slider class adds 100% width to images and disabling it fixes the images.
.slider-slide > img {
width: 100%;
display: block;
}
is there a way to disable the width so the images won't be stretched?
My solution is as follows. The images don't stretch in full screen.
img.your-class-name {
background-repeat: no-repeat;
min-width: 100%;
width: 100%;
height: 100%;
}
I had this for ages too. Really frustrating. I was using emotion and CSS Grid. So in my case I first made sure I got the demo working by doing this:
Make a component for the slider
Set up the demo code inside the component as is
convert CSS - In my case: import { css } from "react-emotion", then convert the style={{ tags into className={css`
add a view-port based limit using the %vw; in my case I have a 5% gutter down the side so I limited to 90vw (90% of viewport), as follows
<div className={css`
width: 90vw;
margin: auto;
`}>
<Carousel>
// demo code
</Carousel>
Depending on your libs and surrounding css, you will need to vary this approach. I am basically making sure the CSS is all processed at the same time, by the same tool, so it's not compiled in some weird order. Then I'm limiting the div width that contains the carousel. It's twitchy AF - I broke it several times by adding unrelated CSS - and I'm using emotion which prefixes CSS, so it made no sense but hey, that's the joy of CSS.
I'm using intro.js to guide users through my application the first time they log in. It's a great tool and it works, the only downside I see is that the introjs-tooltip element is not responsiv.
As you can see below the tooltip has a min-width and max-width in px which really don't make it very responsiv. Also this makes the image I include in some of the steps really small and kind of useless, because of the small size.
CSS - Simplyfied
.introjs-tooltip {
position: absolute;
visibility: visible;
padding: 10px;
min-width: 200px;
max-width: 300px;
}
I have been working on this "issue" for a few days now, and can't figure it out.
So my questions are: Is there a way to make the tooltip use % instead of px without having to change to much in the intro.js file? If not, what would you guys recommend me to do?
You can provide own implementation for .introjs-tooltip in your custom css file:
.introjs-tooltip {
min-width: 100%; // change to desired
max-width: 100%; // change to desired
}
or you can use an additional class eg: .tooltip-large:
HTML
<div class="introjs-tooltip tooltip-large">
...
</div>
CSS
.tooltip-large {
min-width: 100%; // change to desired
max-width: 100%; // change to desired
}
In my case, "min-width" and "max-width" css rules are not working as expected, at least for floating tooltips in a responsive desing. In ended up doing the following. Maybe this is helpful for someone (tourTooltip is a custom class I defined for tooltips):
/* Size < Small */
#media screen and (max-width: 756px) {
.tourTooltip {
min-width: 300px;
}
}
/* Size > Small */
#media screen and (min-width: 756px) {
.tourTooltip {
min-width: 500px;
}
}
I am currently developing a web application using jQuery.
The layout for the same goes as shown in the figure given below:
The orange color box at the very back should be 100% in height and width with some margin like 5px or so.
The logo and the tab-bar are placed as shown and are about 50px in height. But tab-bar should take size as shown with some margin.
The tab content should occupy the remaining height and should scroll for the contents it occupies.
Similar structure is required for the internal menubar and tab content.
Can anyone please suggest the layout method to employ?
Or how can I manipulate different heights/widths?
The requirement also suggests a responsive window i.e. the width/height to manipulate on resize.
The jsFiddle I said I'd make.
As you'll see, I make use of jQueryUI for the "tabs" layout and simply "add" a few things. The few things I "Add" are simple and the jQueryUI alreqady provides a strong CSS with which to manipulate to get desired result. Also attached to that page is a theme-switcher, so you could see what it would look like using different jQueryUI Default Themes.
I'll try to explain the process as shortly as possible without being to vague.
HTML
I first start with a basic page wrapper. Not too necessary, but it provides a nice "element" with which to work inside of and possibly make manipulations for page layout change in otherways in the future. For now it simply holds our page "padding" of 5px. The HTML and BODY tags will be set to a default and should not be manipulated beyond that as height and other properties begin to take different meanings for these tags in different browsers.
I then place 2 divs inside this wrapper, again, these could be done without depending on your needs. I like these 2 divs and use this alot because it provides "vertical align -> middle" as one might expect. The first, parent, is a div with class table. This will have its display set to table to provide a "table-like" layout but still have the ability to do things like "round the corners" or, as in my case, set height! The second, child, is the same except it will have a class and style as table-cell, respectively. This allows us to set something like vertical-align: middle; and ensure that this element is in the vertical middle of the page/table element. Again, with your layout, this may seem unneccessary, but I don't know your full expected end result and I'm trying to give as much "fluid dynamics" to the page as possible.
Finally, I first insert the jQueryUI tabs HTML in their expected layout, with 2 small differences. I place our "logo" in a custom span tag just before the ul. I also take the ui-tab-panel(s) and place them in their own container. This helps us adjust the height of our tabs area as needed. I also gave this container overflow, so even tho overflow maybe hidden on the body, it's still available for the tabs. (see also: small blog i wrote on jQueryUI Tabs)
<div class="page-wrapper">
<div class="table">
<div class="table-cell">
<div id="tabs">
<span class="my-logo">
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="logo here" />
</span>
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div class="ui-tabs-panel-container">
<div id="tabs-1">
<<p> ... </p>
</div>
<div id="tabs-2">
<p> ... </p>
</div>
<div id="tabs-3">
<p> ... </p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
As I mentioned before, jQueryUI provides us with a strong CSS to work with already. As you might have noticed, I made use of some of this by using their predefined class names throughout the HTML. This established things like background, color, and even font-family and more! Now that that is over with, let's layout our page mechanics first. As I mentioned, I give a very "direct" set of properties to HTML and BODY. This will help eliminate "Cross-browser-issues". I also provided a background color, tho you could set that at one of the children levels. This was done just to show you where HTML, BODY exist.
I then set our "frame" elements. .page-wrapper will provide our page wrapping, sizing will come from within, so there is no need to deal with it here. The .table and .table-cell provide display exactly as their name suggest. As previously mentioned, this provides a nice ability to maintain an element in the exact "center" of something, even vertically!
Now we manipulate our tabs and content. I use #tabs throughout to maintain "name-spacing". This will not only help with any "css overrides" on jQueryUI presets, but also helps keep page layout confusions to a minimum. This is always a good thing.
The first thing I manipulate is the placement and setting of our custom span for the logo. Then, of course, I have to change the ul to next to it. Thus I look at the CSS for the uls class. If I open edit tools in a browser, I can see the ul is given the classname ui-tabs-nav and I can see it has a margin setting. If I play with the margin-left of this ul I can see that nothing is affected but the left side of the ul. PERFECT! Here is what I must manipulate to set our log in its "own space".
Finally, I simply set our tabs container (given custom class name, ui-tabs-panel-container, made to match jQueryUI) to have overflow, so that if any content exceeds our page height, it can still be scrolled within this element.
html, body {
background-color: #ADDFFF;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
width: 100%;
}
.page-wrapper {
padding: 5px;
}
.table { display: table; }
.table-cell { display: table-cell; vertical-align: middle; }
#tabs .my-logo {
display: inline-block;
float: left;
height: 2em;
margin: .5em 0 0;
padding: 0;
width: 2em;
}
#tabs .my-logo img {
max-height: 100%;
max-width: 100%;
float: left;
}
#tabs .ui-tabs-nav {
margin-left: 2em;
}
#tabs .ui-tabs-panel-container {
overflow: auto;
}
JS
Finally, the easy work. I write a function to set the height of our tabs content area, since it will be "filling" the rest of the page. This take a little thought, but not hard to figure out. With the function written, I simply add it to the window resize event and call that event right after. This way it's resized on load, thus giving us our "end height" for first view. I also establish the tabs, although not much work there since I'm just making "default tabs". Feel free to experiment, go wild!
// the following will resize our tabs content area and account for all the spacing neccessary
function setContentHeight(e) { return $(window).innerHeight() - $(this).offset().top - 10; } // -10 to account for padding
$(function() { // our on page load call
$("#tabs").tabs(); // establish tabs
// add ability to resize tabs content area on window resize, then call resize event
$(window).resize(function(e) { $("#tabs .ui-tabs-panel-container").height(setContentHeight) }).resize();
})
As for the layout of tab content, it's all up to you and your imagination. Hopefully this will give you a good idea of where to get started though! Good luck!
You could use something like Blueprint CSS:
http://www.blueprintcss.org/
Here's a very quick and dirty layout (not using blueprint CSS, just plain CSS), as a general guideline. It still needs work, but it could be used as a starting point:
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden; /* hide page scrollbars */
}
div {
margin: 0 auto;
padding: 0;
border: 1px solid black; /* for debugging */
text-align: center;
}
#header {
width: 100%;
position: relative;
overflow: auto;
}
#header > div {
height: 5%;
float: left;
}
#logo {
width: 23%;
}
#spacer {
width: 1%; /* -1% for borders */
}
#tabbar {
width: 75%;
}
#tabContent {
}
#tabContent > div {
width: 100%;
}
#tabContentMenuBar {
height: 5%;
}
#tabContentMain {
min-height: 80%;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="spacer"></div>
<div id="tabbar" class="fullWidth">Tab bar</div>
</div>
<div id="tabContent">
Tab content
<div id="tabContentMenuBar">Tab content - menu bar</div>
<div id="tabContentMain">Tab content - main content</div>
</div>
</body>
</html>
I've got a navigational bar (#nav_bar), which has the following CSS properties:
#nav_bar {
background: url(../images/navbar.png) repeat-x;
width: 100%; height: 50px;
margin-bottom: 20px;
}
It takes the width of #wrap which is 1024px wide and has margin: auto;, however I would like to expand it so that it will fit all screen sizes 100%. I attempted to set width: 500%; just to see what it would do, then I realized that it expands from the left -> right, rather than both ways from the center.
So, what I'm asking is;
Is it possible to have an element expand from the center, then
perhaps I could set the max-width property or use javascript to
find out the visitors screen resolution then assign the width from
there; without major inefficiencies, i.e. extended load times/cross-browser compatibility issues?
Just for reference, a link to the particular page I'm talking about
Any answers will be greatly appreciated ;)!
Simply move your #nav_bar out of the #wrap.
Alternatively you can make your #nav_bar have position: absolute; left: 0px; width: 100%; in CSS, that will work too.
Why don't you use CSS3 Media Queries, to find out about screen size of your clients.
If your #nav-bar is a block-level element, like a div, a ul or a p element, then it by default would take the whole width of its container. Thus you don't need to set width: 100%; there. Also, you can use text-align: center; to center align the content.
In your case, you can use absolute positioning with overflow: visible attribute, and set the width of the menu. Also, you may simply extract your #nav-bar out of the wrap, to let it take the whole space.
use margin: auto
you can see an example here: http://jsfiddle.net/s995c/4/