Hi and thanks for reading, am building this site http://myspacioclub.com and am using a wordpress responsive theme, and I got this image "bannerfb" with class "banner" that was asked for the customer. So inside the space for the logo I create a new div to put the banner and added this properties to the div of the banner:
.banner {
position:relative;
top:-170px;
left:450px;
}
but as the theme is responsive, when i make windows smaller like the size of tablet or cellphone the layout breaks, can someone help me?
How could I fix the theme that only use the banner properties when the window is in a bigger resolution, or any similar solution but the idea is to keep the banner with those properties without been affected by the smaller size.
You can achieve this different ways, but one way is following: First wrap your logo and banner in a div
<div class="wrap">
<div class="logo">
<a href="">
<img src="http://myspacioclub.com/wp-content/uploads/2013/04/Myspacioclub.png"/>
</a>
</div>
<div class="banner">
<img src="http://myspacioclub.com/wp-content/uploads/2013/04/bannerfb.jpg"/>
</div>
</div>
Then add following CSS:
.wrap {
position: relative;
width: 100%;
}
.logo {
width: 50%;
float: left;
}
.banner {
width: 50%;
float: right;
}
.banner img, .logo img {
width: 100%;
height: 100%;
}
You can see working example in here. Also, I have to point out, that at least at the moment you are using more than 7000px width image in your banner. This is NOT what you should do. You banner, at least in with my screen, is 700px wide. DO NOT ever use bigger images than you need. It shows 700px wide image, but you still have to load the 7000px one. Convert to smaller size! If you necessarily need bigger image for big screens, you could use javascript or css #media tag to load different image for different screen size. For that you have to set your banner image as background not as <img> and then do something like this in CSS:
#media only screen and (min-width: 35em){
/* Style adjustments for viewports that meet the condition */
.banner { background: url(path/to/image); }
}
You can set many steps like this. Just add another one, change the min-width and load different image to background.
So in your page you have to do following in CSS:
#media (min-width: 1320px){
.span8 { width:1178px; }
}
.name-logo, .banner { width: 50%; }
.banner img { width: 100%; height: 100% }
.name-logo img { width: auto; height: auto; }
.name-logo { float: left; }
.banner { float: right; }
Trick with responsive layout is to use percentage values not fixed pixel ones and do not use negative margins if possible.
Related
The divs of the bellow web page shift out of alignment when the window is made too narrow, or the image thumbnails are clicked. Is there a way to prevent this from happening?
http://nosgoth.net/NR-Test/ff_scroll-test3.html
Note that the "frametop" div and "framebtm" div contain images inserted into the html, while the "text", "content", and "container" divs use background images. Thanks.
So, your issue was that your background-images were in a fixed and centered position relating to the viewport. By themselves neither of these are an issue, but together they try to remain in a fixed position while being centered to the screen. It causes issues when the screen is smaller than the image itself. Unfortunately if you remove one or the other, it breaks your expected output.
One way to fix it would be to use media queries (like Trix and afelixj) suggest. Another way is to redo your code and not use background-image. I took this approach.
Instead of having each piece of your frame be built upon elements being used for content, I moved them down into their own div called #frame. With a bit of fixed positioning your original concept remains unscathed. However, it is not responsive (though you could make it fluid with percentages and viewport units easily enough).
Here's a striped down concept of the way I rewrote it:
CSS:
#frame .scroll_bg,
#frame .frametop,
#frame .frame_sides,
#frame .framebtm,
#frame .side_decor {
display: block;
position: fixed;
left: 50%;
transform: translate(-50%);
}
#frame .side_decor {
top: 50%;
transform: translate(-50%, -50%);
}
#frame .scroll_bg,
#frame .frame_sides,
#frame .side_decor {
z-index: -5;
}
#frame .scroll_bg,
#frame .frametop,
#frame .frame_sides {
top: 0;
}
#frame .framebtm {
bottom: 0;
}
HTML:
<div class="content">...</div>
<div id="frame">
<img class="scroll_bg" src="http://nosgoth.net/NR-Test/images/scroll_bg.png" alt="" />
<img class="frame_sides" src="http://nosgoth.net/NR-Test/images/frame_sides.png" alt="" />
<img class="side_decor" src="http://nosgoth.net/NR-Test/images/side_decor.png" alt="" />
<img class="frametop" src="http://nosgoth.net/NR-Test/images/frametop.png" alt="" />
<img class="framebtm" src="http://nosgoth.net/NR-Test/images/framebtm.png" alt="" />
</div>
I placed the frame at the bottom (so it would be on top of everything else) and moved each portion into place with fixed positioning. The scroll background, sidebars, and side decorations were given a negative z-index so that all content would be on top of it and remain clickable.
After that it was just making everything fit. I played around a bit with your values, but for the most part the rest of the code is yours (body and html are the only other places I made modifications).
The whole thing still moves when the images are clicked at the bottom, but I have a suspicion that that is fancybox's issue.
Here's a codepen of the final result.
Thats because this div
<div class="text"></div>
has a fixed-width background-image:
.text {
background-image: url(images/side_decor.png);
}
If you want to make it properly in different browser window sizes, you may consider having multiple copies of side_decor.png and assign theme for different broswer widthslike this:
#media screen and (max-width: 400px){
.text {
background-image: url(images/side_decor_400.png);
}
}
#media screen and (min-width: 400px) and (max-width: 800px){
.text {
background-image: url(images/side_decor_800.png);
}
}
For a quick fix, please try appending the below styles
body{
max-width: 814px;
width: auto;
}
.frametop, .framebtm {
left: 50%;
transform: translateX(-50%);
}
#media (max-width: 680px){
body{
overflow-x: hidden;
}
img{
height: auto;
max-width: 100%;
}
.text{
padding: 0 20px;
}
}
Here is my template:
<div id="block1">text</div>
<div id="block2">
<span>content of variable size</span>
</div>
and some basic CSS
#block1 {
float:left;
}
#block2 {
float:right;
}
#block2 span {
}
When reducing the width, how could I make it behave so that, once the two divs cannot fit the page inline, the second div will go below the first (rather than be right floated anymore)?
NOTE: I would like to avoid using media queries.
This responsive theme CSS would be used for multiple sites with content of different sizes.
JSFiddle
In this current JSFiddle, The second div is on the right hand-side. It is fine to me.
If possible without media queries, i would like to design css so that once the second div goes below , the span content is not at the right-hand side
If you mean "I want div2 to go below, but aligned left this time", it's not possible as this behaviour is not predictable using CSS only.
There's no CSS-way to know when it goes below, so impossible to change the floating attribute at this moment.
You could achieve this using Javascript or jQuery. Logic would be:
on ( window resize ) {
if ( div1_width + div2_width > container_width ) {
Change div2 CSS.
}
}
Of course I would suggest to use media queries too.
You can set min-width on the divs. Then, when the line is too small, the one on the right will drop down. However, it will still be floated which may cause issues. That's where media queries come into play to fix such things.
Too many media queries would not make for a pretty responsive design, not to mention they would be a headache.
Anyway, you would have to use at least one media query to achieve a truly responsive design, the simplest example is below:
<div id="block1">text</div>
<div id="block2"> <span>content of variable size</span>
</div>
* {
padding: 0;
margin: 0;
}
#block1 {
float:left;
height: 200px;
background: yellow;
width: 49.5%;
margin-right: .5%;
}
#block2 {
float:right;
height: 200px;
background: tomato;
width: 49.5%;
margin-left: .5%;
}
#block2 span {
}
#media only screen and (max-width : 768px) {
#block1 {
float:none;
width: 100%;
}
#block2 {
float:none;
width: 100%;
}
}
Fiddle here.
If you want to have a look at something more practical, a good starting point is here(its an example of an accordion changing layouts depending on screen size, using media queries).
My page is split into 3 slices, as shown in this JFiddle.
In my full source code, I have media queries to help manage sizing between mobile and desktop. When someone accesses the site on mobile mode, Logo should appear at the top, and Items should appear below it. (I set display: none on my picture div to hide it)
Problem:
I can't change the positioning of the divs in HTML, or it'll disturb my current 3 slice layout. Absolute positioning is not an option, since most of my site is already dynamically sized, and I wouldn't want absolute positioning to interfere on a resolution I haven't tested on. This means calculating the margin sizes would be out of the question aswell.
So, absolute positioning is not allowed, nor is changing the orders of the divs. The result I'm looking for would be similar to this, exception without repositioning the divs.
My question is not about media queries, or how to size for mobile using media queries. I am only asking about how to get the layout I want with the restrictions in place (no absolute positing, no calculating margins, no changing div order).
Other questions I looked at:
Reposition div above preceding element - First answer suggests repositioning divs, which I cannot do. Second answer relies on calculating the position, which could interfere with other dynamically sizing elements.
Move The First Div Appear Under the Second One in CSS - Suggests I use absolute positioning, which I cannot do
Flexbox layout is your friend here. display: flex can be used to interchange the elements position on the layout.
#container { display:flex; flex-direction: column; text-align:center;}
#items { order: 2 }
#logo { order: 1 }
#picture { display: none; }
<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>
display: flex works only in modern browsers. Check caniuse.
A test on my android mobile shows it working on Firefox and Chrome, but not on the stock Android browser.
I tried to solve the solution using transform: translateY property in percentage value.
Note: This works if and only if the two containers have same height. or if the height is already known, then you can set the transform: translateY value according to the height.
CSS
#media (max-width: 700px) {
#container > div {
width: auto;
display: block;
float: none;
}
#container #picture {
display: none;
}
#logo {
transform: translateY(-100%);
}
#items {
transform: translateY(100%);
}
}
Working Fiddle
Probably the easiest is if you play with minus margins. Note that the below sizes (width and side margins) may need to be adjusted to your specific needs.
#container * {
width: 95vw;
text-align: center;
}
#items {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: left;
margin-top:30px; /* has to be smaller than the absolute of #logo */
margin-left:25%; /* half of the element's width */
}
#logo {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: right;
margin-top:-40px; /* its absolute has to be greater than the one of #items */
margin-right:25%; /* half of the element's width */
}
#picture {
width: 33%;
float: right;
display:none; /* Hiding #picture as you said you would */
}
<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>
I'm Making a BS Carousel. Images look out of place and don't cover carousel completely when browser is smaller and text doesn't stay centered. How can I figure this out? I haven't found an answer that could help me.
This is my CSS:
.carousel-inner {
height: 400px; }
.carousel-caption {
padding-bottom: 30%;
}
Here is the site: ' http://machinist-alec-32224.bitballoon.com '
Well at the moment your .carousel-caption has bottom padding set at 30%. On bigger screens that padding moves caption out of carousel. You should change that to a margin.
Also, your images stretch because you gave them fixed height but in the same time you expect them to stretch till they fill 100% of website width. You should set fixed height and on carousel item and not on image.
This CSS should give better results:
.carousel-caption {
margin-bottom: 125px;
}
.carousel-inner> .item {
margin: 0 auto;
height: 500px;
}
.carousel .item > img {
height: auto;
min-height:500px;
min-width: 100%;
}
You need to made the image resonsive. Something like that:
<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">
.responsive-image{
height:auto;
width:100%;
}
Say that i want to have a couple of divs on my page with images in the background (like this: http://www.ubudhanginggardens.com/). I know how to set the size of my divs, but the problem is that the background image stays the same if I make the web browser smaller... I want the background image to scale up/down with the web browser.
CSS
body, html {
height: 100%;
width: 100%;
margin: 0px;
}
#container1 {
float: left;
height: 100%;
width: 50%;
background-image: url(../img/1.png);
}
#container2 {
float: left;
height: 100%;
width: 50%;
background-image: url(../img/2.png);
}
This can be done with pure CSS and does not even require media queries.
To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.
Source
CSS:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
And if you want to enforce a fixed max width of the image, just place it inside a container, for example:
<div style="max-width:500px;">
<img src="..." />
</div>
jsFiddle example here. No javascript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
If you would like to have your image scale with your browser, set the width to a percent instead of defining it as a number of pixels.
So if you wanted the image to always cover half of a div:
<div class="my_div">
<img src="http://example.com"></img>
</div>
<style>
.my_div .image {
width:50%;
}
</style>
As you change your browser window size, the size of the image will change. You might want to take a look at Responsive CSS Frameworks, such as Twitter's Bootstrap, which can help you achieve exactly this behavior.