So im using the foundation frameworks for my wordpress build. I cant seem to figure out why im getting this weird margin or padding on the right side when i drop down to tablet or mobile view.
Anyone ever seen this or know of a fix?
Heres my dev site. if you size the browser down to tablet or phone size and scroll to the left or right it will show up.
I'm using Chrome
body {
background: url(../img/dark-grungewall.jpg) repeat;
height: auto;
}
.site-container {
background: #fff;
box-shadow: 0.5px 0.866px 63px 0px rgba(0, 0, 0, 0.83);
width: 100%;
margin: 0 auto;
}
.row {
margin: 0 auto;
max-width: 100%;
width: 100%;
}
I wanna say the error is coming from my containing divs or body but im not really sure.
http://dev.solarinnovations.com/
This happened to me in the past when using the .row class from Bootstrap. Try putting overflow:hidden in the style part of the wrapper/container class and see if it fixes the issue.
In this part of your code, you set a max-width. This max-width is stopping the site from stretching across the entire window.
.row {
margin: 0 auto;
max-width: 87.5em;
width: 100%;
}
You can fix it by easily using:
max-width:100%;
Related
I was creating the about section of my site and was placing an image besides some text and now when i shrink the screen size the image for some reason is not taking up the full height of the containing <div>.. please check the fiddle and help me understand the reason for this.
The borders will show you the gap at the bottom which I don't want to show..
Please note that I do have bootstrap wired in as well for the project but I am not using it for this section.
Thanking all of you in anticipation
You've got min-width and max-width set on the images's parent, as follows:
.about-content {
box-sizing: border-box;
min-width: 200px;
max-width: calc(50% - 2em);
}
Remove the min / max width properties and it works (note, I've added a media query in the CSS as per below): https://jsfiddle.net/m9j61oua/7/
Although pretty pointless as I don't know any devices that go that small, you could wrap it in a media query :
#media (min-width: 201px) {
.about-content {
min-width: 200px;
max-width: calc(50% - 2em);
}
}
EDIT - Further to comments below, I think the only way forward for you is to use a background-image on the second div, here's a fiddle: https://jsfiddle.net/m9j61oua/14/
Relevant CSS:
.about-content.bg-image {
background-image: url(http://assets.worldwildlife.org/photos/1620/images/carousel_small/bengal-tiger-why-matter_7341043.jpg?1345548942);
background-size: cover;
min-height: 200px;
}
I've appended the class bg-image to your second div and removed the image element within it.
As you can see, it's not a perfect solution to what you're looking for, but with the right image and some media queries, you should be able to crack it.
The image isn't any higher. If you give it height: auto, it keeps its proportions, which usually is desired.
If you would set it to height:100%, it would be distorted, or (if you then set width to "auto") cut off a the sides.
One possibility would be to define the image as background image for its container and use background-size: cover; background-position: center; Background-repeat: no-repeat; on it. But this will cut off some parts of the image.
If you use background-size: contain;instead, you get the full image again, but with some space on either the sides or top and bottom.
img tag is inline-block by default, so you need something like this:
.about-content img {
display: block; /* remove extra space below image */
max-width: 100%;
height: 100%;
}
You have defined such style
.about-content img {
max-width: 100%;
height: auto;
}
which force browser to keep image aspect ratio.
Use image with correct aspect ratio or change style of img element.
There is a little change on line #14 in css. change max-width: 100%; to max-width: auto; height:auto to height:100% &
And Here is your code Make changes in your css and it will work. :
.about-content-wrapper {
margin: 2em 0 5em;
display: flex;
flex-wrap: wrap;
padding: 0 1em;
border:1px solid #ccc;
}
.about-content {
box-sizing: border-box;
min-width: 200px;
max-width: calc(50% - 2em);
}
.about-content img {
max-width: none;
height: 100%;
}
.about-content h2,
.about-content p {
margin: 0 1em 0 1em;
}
I'm building a fairly simple static frontend-only webpage. I have the following css rules for my wrapper div (everything else in the page is in it) and the body:
body {
background-image: url(../img/background.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
}
#content_wrapper {
margin: 15px 10%; /*Client wants 20% instead of 10. Navbar must be adjusted accordingly*/
min-width: 900px;
padding: 0;
border-radius: 10px;
}
Which works fine:
However, as you can read by my comment the client prefers a 20% margin, as to make the whole page more narrow. However this happens:
The page shifts right. This is pretty much the same visual issue I have opening this page with my tablet even using 10% margin (although I would appreciate an explanation to why that happens in tablets, it's not the focus of this question here).
How can I fix this? For all I know this shouldn't happen
When you state that
margin: 15px 20%;
you are effectively telling that you have 20% for both of left and right margin. This means that #content_wrapper has 60% of the container as a maximum. The problem is that 60% might be bigger than the available space. I believe you should add the width to the rule:
width: 60%;
well try changing it to width: 15px 20% 15px 10%; you wish to change only left side margin to 10%.
Or put 2 blank div on each side of .content-wrap with 10% width and phantom data to give width to it
I am trying to create a mobile responsive template. I am using the CSS media to find the browser width and it's working fine in most cases.
I want however on a device where the left column will take up too much space for it to jump below the main content on the right.
The solution to get the left down was to use flexible columns to reverse the flow.
This works fine in Firefox, Google Chrome, Internet Explorer and Opera on a desktop.
It doesn’t work on Google Chrome on an iPhone and doesn't work in Safari either on a desktop or iPhone. In both cases the left column appears above the right column.
It works on my friend's Android.
This is the html:
Expand|Select|Wrap|Line Numbers
<div id="content">
<div class="left">
LEFT CONTENT
</div>
<div class="content">
MAIN CONTENT
</div>
</div>
The CSS that sets the values for these blocks on screens of 980 pixels and larger:
Expand|Select|Wrap|Line Numbers
#content {
clear: both;
margin: 0 auto;
width: 980px;
display: inline-block;
min-height: 600px;
}
.content {
float: left;
min-height: 500px;
padding: 10px 10px 0 10px !important;
width: 742px !important;
}
.left {
float: left;
padding: 10px 2px 0 10px !important;
width: 202px !important;
}
The code which control the columns at the correct browser size is:
Expand|Select|Wrap|Line Numbers
#media (max-width: 632px) {
#content { width:603px; display: -webkit-flex; display:flex; -webkit-flex-direction:column-reverse; flex-direction:column-reverse; min-height: 0;}
.content { width:583px !important; min-height: 0;}
.left { width:583px !important;}
}
Any help would be much appreciated.
I used your code to simulate locally. It appears to work just fine on Safari (for Mac, at least). Isn't this the expected behavior? Can you provide images or further details?
It isn't related to your question directly, but I guess you'd better use percentage width instead of raw pixels. If you don't want divs to save a distance between them, you should use margin-right (or left).
I have problems with my website. There is displayed only one (first) image on website even if futher images will be this same (I mean this same src, just like to first one).
Website has section with image background.
Code:
#kafelobrazintro {
background: url(../images/introtablet.jpg) 50% 0 no-repeat fixed;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
overflow:hidden;
}
This is section with working img but even if I copy this css to another section, website will still display only one img.
Images on website are lower than 2 MPX, resolution: 1024 x 614 px, size less than 100kb.
If u have iPad check my website and get know what Im talking about :> Website display only first img :?
Why its not working?
Adress: http://www.badzlepszy.pl/Nebiolo/
The problem is with the background-attachment: fixed;. If you remove fixed the background images work.
Use media queries to change this property at the appropriate window sizes.
Still didnt solve the problem. First image on iPad displays, but futher ones dont.
If u have iPad u can check at: website
I created tableb.css just for iPads:
<link media="only screen and (device-width: 768px)" href="css/tablet.css" type= "text/css" rel="stylesheet" />
CSS for img section in tablets:
#kafelobrazintro {
background: url(../images/introtablet.jpg) 50% 0 no-repeat;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
overflow:hidden;
}
#kafelobraz1 {
background: url(../images/logomzblue.jpg) 50% 0 no-repeat;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
overflow:hidden;
}
Same problem was here with a little bit of difference. My div-s with background images were empty ( no text and no html content )
The solution here was adding: min-width: 1024; to these div-s.
( I tested your site with iPad Air and iPad 4th on http://www.browserstack.com/ and looks good )
I am having issues making the sprite I have resize, when I resize browser window.
The remiander of the template is repnsive including the Nav Menu.
The sprite remains fixed and sticks out of the page when resizing.
How would I make it size like the rest of the template (removing the width scroll bars)
If you just remove the sprite everything displays correctly.
I have created a Fiddle but its not showing the when I click results.
I have uploaded the page to here:
Test Page
Thank you.
Perfect Solution I have Got U can Use
I have used This solution
And It works Fine on all browser except Android Browser
.playerSp
{
display: block;
background: url(blue_sprite.png) no-repeat;
}
.next-button
{
background-position: -83px -6px;
width: 41px;
height: 46px;
}
var abc=(screen.availHeight+screen.availWidth);
$( window ).resize(function() {
var aaa=($(document).height()+$(document).width());
scale=abc/aaa;
$('#playerContainer').css({ 'zoom': (1/scale), '-moz-transform': 'scale('+(1/scale)+')', '-moz-transform-origin': '0 0 ' });
});
</script>
So I was stuck with the same question and noticed the answer was not yet given here.
Here is the answer:
I've managed to make my sprite fully responsive. For this I didn't use any slicing (photoshop) or javascript. Also notice how the sprites are positioned absolute and yet still responsive according the background.
For a better understanding of this process, please see the following link: http://brianjohnsondesign.com/unlisted/demos/responsivesprite/
Also see my link in order to see how it looks on my website: http://demo.chilipress.com/epic3/
Should my link not work anymore, try the first link above.
See here the CSS and HTML
#sprite1_contact{
background-image: url('sprite_contact.png');
width: 35.2%;
height: 0;
padding-bottom: 7%;
background-position: 0 0;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 32.3%;
z-index: 2;}
#sprite2_contact {
background-image: url('sprite_contact.png');
width: 27.5%;
height: 0;
padding-bottom: 28%;
background-position: 0 27%;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 35.8%;
z-index: 1;}
HTML
<div id="sprite1_contact"></div>
<div id="sprite2_contact"></div>
your sprites have fixed height: 632px; & width: 1163px; if you want them to resize youshould add at least a min-width and a min-heigth properties
example, if you want your sprites resize to a minimum of 10 px lets say you would add those properties to your code
#sprite-main-v2 {
height: 632px;
width: 1163px;
min-height:10px; /*added this line*/
min-width:10px; /*and this line*/
background-image: url(../images/landing-page/landing-sprite-5.png);
background-repeat: no-repeat;
background-position: 0px -700px;
cursor: pointer;
}
you can also use media queries to change the image acording to screen width or height: example:
#media screen and (max-width: 980px) {
#sprite-main-v2 {
height: 100 px; /*new size*/
width: 100 px; /*new size, value just as example*/
background-image: url(../images/landing-page/landing-sprite-5-small.png);/*smaller image*/
}
}
Shrink your sprite to a smaller set size by adjusting its background-position and background-size css properties in a media query.
background-position: 0 -135px;
background-size: 170px 190px;
Those number are an example, you have to play with them to get it to line up with your sprite, which can be confusing as the image can disappear. Recommend adjusting them bit by bit in developer tools.
You can also use percentages to allow for a more responsive resizing, although this can get tricky too.
Note, background-size doesn't work on IE8 but neither do media queries....