I have a series of divs that I'm adjusting using css media queries whenever the user re-sizes the page. I'm able to get everything centered but it's not consistent. All the divs should have the same css to get centered but for the #media (max-width: 560px) media query (the last one), I have to do this:
#game_box .text_holder {
margin-left: 25px;
}
#kids_devotional_box .text_holder {
margin-left: 0px;
}
#family_devotional_box .text_holder {
margin-left: 0px;
}
My question is, why aren't all the margin-left's the same? If I set all of them to 0px or to 25px, some will be off while some will be centered. Am I doing something wrong elsewhere? Also please feel free to give me tips about my css because I am very new to it.
https://jsfiddle.net/dholl7213/kmkphavj/20/
use the margins and paddings and all in % that may help you
eg:
margin-right: 20%;
Related
fairly new to CSS and HTML here. I have a few questions:
currently trying to replicate this website, and whenever I resize my window so the width is smaller than my header image (1000px), one of the div starts to move as it tries to stay in the center. Basically I would like to keep all of the text content aligned vertically no matter no big the window size is.
Another question is how do I resize the content of .quote::before. I tried defining width and height, but no success.
Here's a JSFiddle so you can check out the code.
Any help is much appreciated!
To awnser your first question,
you need to remove
padding-left and padding-right property from your .main rule.
.main {
width: 550px;
margin: 0 auto;
margin-top: 45px;
line-height: 25px;
font-family: 'Josefin Sans';
color: #222;
}
I let you try this without padding-left and padding-right
To awnser your another question,
I guess you should use media queries
I let you an example
#media screen and (max-width: 598px) {
.quote {
margin: 0 26px;
width: unset;
}
}
I have recently Discovered that it is incredibly difficult to mix fluid and fixed layout, So when I finally figured out a solution to a problem Ive been having for quiet a while now, i couldn't resist but to share it with the community that has helped me so much in the past.
i wanted the following look:
by dynamic space i mean it should be very much like when one applies a "margin:0 auto;" CSS rule to a containing div, the white space left and right of the element is the "Dynamic Space" in the example.
I had 6 Requirements:
had to be responsive.
the container had to have a max width of 960px and always needed to be centered.
had to work on IE8 and up.
The Dynamic space on the left had to have a different height, and contain a different color.
The Dynamic Space on the right had to be the same height has the container but a different color.
Has to work with Twitter Bootstrap.
At this point I struggled for 3 days, i tried everything from css table-cells to using bootstrap columns (neither worked out).
I also realized that the only way to have the div in the "same" position on huge screen sizes was to make it 50%.
So at this point i had the Following:
JSFIDDLE DEMO
which was pretty good, only problem was that the red stuck out underneath the container element.
So that My Wonderful Not At All Mathematical brain kicked in and thought:
if my containing element will always be 960px and i need my div on the left to be 50% to stay in the same position, what if i simply took 960/2 = 480px and simply applied margin:-480px.
which worked brilliantly.. until you scale your screen down to about 768px, so add a media query that changes it to margin-left:-370px;.
And it Finally Worked! Here's the Final Code:
JSFIDDLE DEMO
AND HTML:
<div class="" style="background: #000099; position: relative">
<div class="left">l</div>
<div class="container" style="background: #002500">contain</div>
</div>
AND FINALLY CSS:
.container {
max-width: 960px;
z-index: 1;
position: relative;
padding:0;
}
.left {
position: absolute;
left: 0;
width: 50%;
z-index: 1;
background: red;
height: 50px;
margin-left:-480px;
}
#media (min-width: 768px) {
.left {
margin-left:-375px; /*I Used -370 but for some reason it doesn't work now*/
}
}
#media (min-width: 992px) {
.left {
margin-left:-480px;
}
}
I Hope this Helps Someone, Sorry that its so long just wanted to explain the logic as clearly as possible.
I have a website, already built in bootstrap, it's a wordpress theme and it's responsive.
It's not up on the web so i can't show you exactly example of my theme but it follows this kind of markup http://getbootstrap.com/examples/carousel/
My header with menu is full width and slider is full width, and content is wrapped in container very similar as example from getbootstrap.
Now i need to add ads to the left and right side of the content, and this need to be something like this http://www.bigblue.rs/
but since bootstrap layout is responsive i tested with various width % and floats but i can't make it work. when i watch site on 21" they need to cover whole left and right emptiness, as site is resized, they should simply go out of the screen and not interfere with rest of the center content.
EDIT: heres demo on bootply with layout that i have on my website http://bootply.com/108951
While it won't get you the exact feel of the linked site, where the ads slide off the edge of the page, probably the easiest thing to do would be to use Bootstrap's responsive utilities classes (http://getbootstrap.com/css/#responsive-utilities-classes) to show and hide the ad divs as you resize the screen. I've edited your Bootply demo to show what I mean, in context: http://bootply.com/108988#
If you don't feel like digging through the code:
Choose at which point you would like your content to appear. Bootstrap's defaults (which can be found under "grid media queries" in the CSS documentation, sorry, I'm out of links) are sm, md, or lg. We'll go with lg for the sake of brevity here.
Add one <div class="visible-lg col-lg-1>Ad Content goes here!</div> above and below your existing three <div>s, for a total of 5 divs in the row.
Change the # on your existing <div class="col-lg-#>s so that there are 12 per row. This might be somewhat wonky, since you now have 5 columns.
This will cause the ad divs to show and hide at the breakpoints. While they are visible, they will resize responsively, just like the rest of the site.
Alright the approach is very simple.
On top of the page i added 2 divs. But to solve the problem with responsiveness i had to set margin of those 2 divs for each media size. Here is the styling.
.advertis-left {
left: 50%;
margin-left: -1050px;
position: fixed;
text-align: right;
top: 0;
width: 500px;
}
.advertis-right {
left: 50%;
margin-left: 570px;
position: fixed;
top: 0;
width: 500px;
}
/* Responsive Styles */
#media (max-width: 1199px) {
.advertis-left {
margin-left: -950px;
}
.advertis-right {
margin-left: 470px;
}
}
#media (max-width: 991px) {
.advertis-left {
margin-left: -840px;
}
.advertis-right {
margin-left: 360px;
}
}
#media (max-width: 767px) {
.navbar-nav .dropdown-submenu > .dropdown-menu {
margin-left:10px;
display:block;
}
.advertis-left,
.advertis-right {
display:none;
}
}
So now i have 2 banners fixed on left and right side not overlaping with main content and when switched to other screen size it follows #media size untill it's on smallest device where it's no point to be visible at all.
Here is a bootply example but i don't know why it's overlapping there, i guess i use different padding and margin on my content div.http://bootply.com/110193
I have this site of mine www.virtualcloudguru.com. Now the problem here is the header (The logo and the menu). I've defined a fixed 100px padding for both logo and menu but it will shift left/right if the screen resolution changes.
Now there are 2 ways
Make both of them align in the center of the screen
Make the 2 elements change position according to the screen resolution.
I've copied the code in jsfiddle. Although not complete
If you want to make elements change position according to screen resolution, you can use CSS media queries. Here's an example that will work with your page:
#media screen and (max-width: 600px) {
#header .top-logo, #header ul {
padding-left: 0;
}
}
You can think of the #media line as similar to an "if" statement for CSS. In this case, it's saying if the media is a screen (i.e. not print, etc.) and has a maximum width of 600 pixels, make the left padding 0 for the logo and list in the header.
In other words, any CSS rules within this #media section are only effective when the browser's visible window width is 600 pixels or less, in which case they override any previous CSS rules.
Add this to the end of your CSS and trying narrowing the browser's window to see the effect.
EDIT: I forgot to add that it's OK to have more than one #media section. For example, you could add a second section with max-width: 480px (or similar) containing rules for smaller screens.
EDIT 2: Centering the logo and menu
The logo has a fixed width so we can make it a block element and use margin: 0 auto, like this:
#header .top-logo {
display: block;
margin: 0px auto;
padding: 0;
width: 425px;
}
Remember to remove your existing float: left.
For the menu, this is just text so we can use text-align: center. Again, remember to remove your existing float: left on the li elements — we'll use display: inline instead.
#header ul {
padding: 0;
text-align: center;
}
#header ul li {
display: inline;
}
Please double-check this cross-browser before implementing, by the way.
Please use this CSS
#header {
width: 1130px;
padding: 0;
}
#header .top-logo {
padding: 0;
}
Screenshot
If you want the header to always stay in the same position relative to the body of the page, then place the two into a common div, and apply the width: and margin: properties that you would have applied to the body, to that container.
You can also use the body element as the common container and apply width and margin to that too, as an alternative.
Here is the demo on JSFiddle.
I am using Twitter's Bootstrap framework - http://twitter.github.com/bootstrap/
What you will see in the stylesheet (on JSFiddle) is at the top are the appropriate classes from Bootstrap, but at the bottom are mine.
On JSFiddle, for some reason, everything doesn't look the way I want it to (I think it could be because of the static values and the smaller window on JSFiddle).
This is how it looks in my app:
However, the issue is that it works when I specify specific widths (in pixels) for everything.
What I want to happen is, the layout stays the same regardless of the size of the browser window (the image doesn't have to resize automagically, although if that can be achieved with no JS that would be cool). So, in theory, the layout wouldn't have broken once I took it into JSFiddle.
Any ideas?
You could do this:
First, get rid of the min-width that is set in the Twitter css
div.container-fluid {
float: bottom;
padding: 0px;
min-width:0; /* add this */
}
Second, give the .content div a fluid width
div.container-fluid .content {
border: 1px black solid;
margin: 0px;
width: 80%; /* adjust this */
float: left;
padding: 10px;
}
Third, float the items in your form
div.row.profile_pic div.span5 {
width: 120px;
float:left;
margin-right:1em;
}
div.span7{
width:40%;
float:left;
}
Of course, you will need to adjust the values. I just picked some random #s.
Example: http://jsfiddle.net/ytSjc/1/