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.
Related
I'd like to increase the size of the header logo for mobile phone view only. When I tried adjusting the css on a test site the whole thing crashed. I changed these max-height numbers:
I saw there were calculations in the code for mobile - does changing the numbers possibly break that?
#media screen and (max-width: 767px) {
.header-home-link.has-logo {
height: auto;
max-height: 64px;
}
}
#media screen and (min-width: 320px) {
.header-home-link.has-logo {
height: auto;
max-height: 50px;
}
}
From your question, it would seem as though you are editing an existing piece of code so there may be other factors I'm not aware of. However, your current setup works by making every width greater than 320px set the height to 50px and every width under 700px have a logo height of 64px. This contradiction may have caused some issues, however, I know chrome prioritises the rule that is later in the code thus creating a window under 320px where the logo height is 64px. For a cleaner solution, I would suggest putting the height for the logo for all other screens in your main CSS without a media rule and adding a max-width media rule with a width of 500px or so for the height of your logo.
Also is there a particular reason why you went for the approach of setting a max-height and then setting the height to auto as opposed to changing the height of the image directly and then setting the width to auto if necessary?
If you're still having issues I can also suggest trying to isolate the issue by testing aspects of your code with simple statements you know will work.
I am having problem in making a screen center for small screens
I've created 1500px wide long page designed in photoshop and sliced into tables.
i used the following code to center my page
width:1500px;
margin: 0 auto ;
position:relative;
to make it center , its good on big screens but in small screens a horizontal scrolls appears and its all to left i want to in middle as a default and i can remove it using overflow x hidden.
Problem with your code is, you used tag and gave width of 1500(not dynamic) also i got containers(#index-07_,#container12) with style of
width : 1500px
instead of using
max-width:1500px
change them also add style(obviously not good choice; you may choose specific image tag but for quick fix it will work for you)
img{width:100%}
i hope it may worked for you
Your applying a static width to page, so if your viewing in small screen, page gets overflow, so in this case you have to adjust the page width with respect to screen resolution. It can be done by using media query, refer the below link about media query - http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
use your CSS code with different static width in different resolution like
#media (max-width: 600px) {
.smallerscreen{
width:1500px;
margin: 0 auto ;
position:relative;
}
}
#media (max-width: 300px) {
.smallerscreen{
width:500px;
margin: 0 auto ;
position:relative;
}
}
After reviewing your code, you have go with max-width instead of width in container class as said by Neel.
.container12 { max-width: 1500px;}
Also set image width as 100% as like in below code.
div[id^="index-"] > img[id^="index_"] {
width: 100%;
}
I have this page: http://bit.ly/1In9YCe
It looks as intended on big screens (desktop) but the issue is that when the window is resized down to small screen widths, the "Agree" and "Disagree" labels start to take up their own line instead of being nicely placed before and after the slider on the same line as the slider. I can't for the life of me figure out why they do this, since the available width should be sufficient. Will a kind soul please help?
This is because in the CSS there is a display:block defined:
#media screen and (max-width: 800px)
.ui.form .choice-text {
padding: 0;
display: block;
}
If you remove the display:block it should work.
Use width: 100% rather than width:500px for example on the divs in column 1.
Experts,
I have a page containing thumbnails:
http://ulrichbangert.de/heimat/Bad_Harzburg_Oldtimertreffen/2015-04-05_Bad_Harzburg_Oldtimertreffen.php
My intention is to reduce the size of the thumbs to 50% for a small screen so that more of them fit on the screen. I already have a solution by JS but would like to use CSS instead. My latest approach uses scale:
CSS:
#media only screen and (max-width: 768px) {
a.th200 {
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
display: inline-block;
}
}
HTML:
<img class="th200" src="2015-04-05_Bad_Harzburg_Oldtimertreffen_01_th200.jpg" alt="Oldtimertreffen in Bad Harzburg">
Scaling down works fine so far as Firebug indicates but there is a lot of space between the thumbnails so that the disired effect is not achieved. What causes this empty space? How can I remove it?
I would use a DIV as a container and then a DIV for each thumbnail, and scale the thumbnail DIVs down. If the images inside are 100% the size of the DIV then they will scale down with it. This will eliminate the spaces you are seeing at the moment.
http://library.skybundle.com/
I need the two big icons to be horizontally side by side until the window is resized to be smaller (like that of a mobile phone, for example), and then when that happens, the orange one on the right should drop down below the green one to form a vertical layout.
I know I should use media queries, as I have been told, but I am not sure how to do this or which ones to use.
I am not great at CSS, but I am learning. I have done TONS of research, spent weeks trying to figure this out. Please help. Thanks!
Make sure this is below your other rule for .skone-half.
This should work
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
}
Just comment if it doesn't.
Here's a really simplified version of that portion of your site in a fiddle.
DEMO
So according to that fiddle you can tell the code works. If you have problems implementing it let me know or if it just doesn't work for some other reason. You could also adjust the point in px it changes at if you want I just set it to when it breaks the width of the container.
EDIT:
Usually though you would want to change the width of the containing element from a fixed width to 100%, this way the images center, like this.
DEMO
In your case you have two containers with widths that you need to change so it would look like this.
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
#container, #head-content {
width: 100%;
}
}
Add this to your css file:
/*if the screen is 800 pixels or less */
#media only screen and (min-width: 800px) {
.page {width: 100%; } /*set your page class to be 100% width */
}
Here's a starting point for your jsfiddle (which exihibits the side-by-side -> vertical layout!).
http://jsfiddle.net/gjGGw/1/
HTML
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/PRODUCT_TRAINING2.png" />
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/EDUCATIONAL_COURSES2.png" />
CSS
img{width:300px;height:300px;margin:0px 30px;}