I'm trying to create a layout using bootstrap that has a bit of an odd background.
For interior pages it is divided into 2 unequal columns [7cols & 5cols] the left column needs a white background & the left needs a light grey background. Both backgrounds need to extend to the edges of the browser viewport regardless of the size. Here is a non-working example: http://dev.randallelectric.ca/
The problems really become apparent when you start resizing the browser window - the right hand column background should appear to maintain it's position behind the text.
I'm not sure how to correctly handle this. Any thoughts?
Try to use .col-xs-7 and .col-xs-5 instead.
i think problem happens because of this:
in bootstrap.min.css
#media (min-width: 768px)
.col-sm-7 {
width: 58.333333333333336%;
}
If you have width less than 768px, than width is being removed from .col-sm-7
And you can do this to get full width white background under 768px else will be your current background:
#media (max-width: 768px) {
div.content {
background: #ffffff;
}
}
Related
Working on this site: https://redheadedroux.com/
Using Sprinkle Pro Theme
The logo image is automatically designed to size down to 150px in height. I added this code to make it larger:
.header-image .site-title > a {
height: 300px;
}
It looks perfect on the desktop view but now when I view the site on a mobile view, I'm left with large padding space between the announcement/hamburger menu and the first widget. I don't want there to be all of that empty space between the logo and everything else.
I've tried adjusting things in the #media areas already within the theme itself, but nothing seems to work. I feel like it's a matter of selecting this height for a different #media area? But I can't seem to get it to work. Any insight?
Thank you
Photo of what it looks like on mobile view:
Checking your site I can't see any problem at all. Everthing works as You have decided.
If you have the rule:
.header-image .site-title > a {
height: 300px;
}
and you are not happy how it looks on mobile, change it with media queries
like this:
#media only screen and (max-width: 600px) {
.header-image .site-title > a {
height: 120px;
}
}
Just use the window width when you desire to use the change of height and be sure the rule is placed at the bottom of you css sheet.
Figured out my issue. I ended up applying this specific code:
#media only screen and (min-width: 600px) {
.header-image .site-title > a {
height: 300px;
}
}
It left the logo sizing alone for any screen size below 600px. But for anything 600px and above, it made the logo height 300px, which is exactly what I wanted. The padding around the logo image on mobile devices is no longer there.
Let's say I have a div on a webpage that displays on a desktop at 1000px width. Let's say I want that div to display at 100% width in portrait mode on all phones. What would be the easiest way to accomplish this without using Bootstrap?
.yourdiv {
width: 100%;
max-width: 1000px;
}
This rule would work pretty well in situations like these: It makes the DIV 1000px wide if the screen is wider than 1000px, and makes it 100% wide on all screens which are less than 1000px wide.
Johannes answer is really awesome but if you need to have more control over what's displayed, you can always use media queries.
Example: hiding a sidebar only when the screen width is <= 600px:
#media (max-width: 600px) {
.sidebar {
display: none;
}
}
You can find out more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I would like a row of three evenly sized circles to appear within my Bootstrap team section. Instead, the circles currently are different sizes depending on the ground truth images, which means the text below the circles (profile pictures) is also not starting at the same line on the webpage.
http://www.bootply.com/LaIxZFaQLO
Any idea what I can do to ensure the circles are always exactly the same size and adjust according to the display?
You can make sure all your images are the same width and height from the get go, then all it would look like is this (no extra css)
http://www.bootply.com/ebWjKhRsN2
OR
You will have to make them all the same size via css
.team-member img {
width: 330px;
height: 330px;
}
when you resize the screen, then you'll have to adjust the height and make it the same as the width via media queries
e.g (in medium sized screens, the width will be 220px, so:
/* md */
#media (min-width: 992px) and (max-width: 1199px) {
.team-member img {
height: 220px;
}
}
I designed a responsive web page for tutorial and I have a trouble with unnecessary padding.
http://zinzinzibidi.com/res
In this page when you decrease the your browser window resolution, you will see the horizontal scroll bar (overflow-x) in some resolutions. I am trying to understand but I can't fix this trouble for a few days.
Here is an example picture of my trouble:
My CSS codes here: http://zinzinzibidi.com/Areas/res/Content/css/style.css
My media screen codes are
What am I doing wrong?
It appears that an inner item is causing the issue. Remove the padding from #header-main-buffer and it should go away.
line 515 of your file:
#header-main-buffer {
width: 300px;
padding: 0 10px; <- this is your problem. remove it and it will be fixed
...
I checked your code and it might be your <div id="header-logo"> the one creating that extra padding.
Since the img has a fixed width of 300px on screens smaller than tit will create an extra padding to the right so it fits the screen.
Try reducing the
#media screen and (max-width: 479px) and (min-width: 320px) {
#header-container {
width:;
}
}
EDIT
Basically check all the img that you're using so you make sure their width is appropriate and they fit the screen.
I have a big container (over 2400 px wide) with 2 DIVs in it (see pictures attached). When the window gets resized or the computer's supported resolution is low, only DIV 1 should be visible, DIV 2 then should disappear.
I tried that:
#media all and (max-width: 1800px) {
#DIV2 { display: none; }
}
and it worked, of course, but I want the text in DIV2 stay at its position and not shift to the left, when the window gets resized – even if it's just a few pixels. I played around with position properties and margins, but it didn't work. How can I fix the text?
Thanks in advance!
you can use border:none for this issue instead of display:none :
#media all and (max-width: 1800px) {
#DIV2 { border: none; }
}