I have a simple page that has a wrapper with a background color on it. When I scale the browser in to a small size the wrapper pops out of position. Its like 20px at the left was added.
Also when you scale the browser in small the input fields drop down to the next line. How can I stop that.
http://www.artaholic.com/push/bc/acc.html
Remove the:
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css"/>
if you not really need it. It'll solve the jump.
The 20px from bootstrap responsive , this line I believe:
#media (max-width: 767px) {
body {
padding-right: 20px;
padding-left: 20px;
}
Related
I have a .body element on my page http://crimeansurfers.tumblr.com which has a border frame that should touch the edges of the screen.
body {
font-family: 'Arquitecta', sans-serif;
font-size: 13px;
color: ;
border: #00f 10px solid;
background: url(https://secure.static.tumblr.com/nu04jpk/IgAniz800/grid_lyfe_background.gif) #fff;
letter-spacing: 1px;
margin: 0;
padding: 0;
}
It shows up fine on desktop (the frame touches the edges of the screen, however, when I open it on a mobile, it shows like this:
As you can see, the right frame is not touching the edge of the screen, but it's supposed to.
I'm using also viewport to resize display for mobile devices with the following parameters:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
What do I need to change in order for it to work as I intended it to?
Thank you!
UPD maybe it makes sense to render the frame using some other method rather than body CSS tag?
There is an overflow being caused by the ul element within the #thumbs div.
You can fix this by adding a media query to the bottom of your style sheet.
<style>
#media (max-width: 414px) {
#thumbs ul {
padding-left: 0;
}
}
</style>
In this case I've set a max width of the media query to 414px as the problem only shows on screen sizes smaller than iPhone 6+.
I have a navbar like this. http://www.bootply.com/COgUDvOM1e when I am trying to reduce the size the screen the navbar is collapsing. But I want to reduce the distance between lines.
I tried the below
.multiselect{
height:40px;
}
But it doesn't work.
It looks like you need to reduce the padding of this element. Here's the code that would do it:
#media (min-width: 768px)
.navbar-nav>li>a {
padding-top: 8px;
padding-bottom: 5px;
}
I would suggest using something like Chrome Dev Tool to inspect the elements and change the CSS within the page.
I am using twitter bootstrap and change default width to 1265px. Try resize out window to 1265px. (demo http://markup.website-builder.ru/demonstration/test.html )
In example we have few blocks and when you resize window - the bug appears. A mystic white line on the right of the screen http://take.ms/fOEn2
How could i fix this? Why is it appears?
Overflow-x is bad idea, because everything else will be broken.
Thanks
You need 30px width difference because you have 15px padding left and right, so that means there are two possible solutions:
#media (min-width: 1265px)
.container {
width: 1235px;
}
#media (min-width: 1295px)
.container {
width: 1265px;
}
I have a logo with a menu next to it:
This is the HTML:
<div id="logomenuwrapper">
<div id="logo"><img src="img/logo_light.jpg"/></div>
<div id="menu">
<ul>
<li>About</li>
<li class="notfirst">Work</li>
<li class="notfirst">Contact</li>
</ul>
</div>
</div>
This is the CSS:
#logomenuwrapper{overflow:hidden;}
#logo
{
padding-right:1.2%;float:left; max-width:100% !important;
max-height:100% !important;
display:block;
}
#menu{float:left;padding-left:1.2%;font-size:0.875em;border-left:1px solid #ea4a4a;}
#menu ul li.notfirst
{
padding-top:0.3225em;
}
I have added some media queries that will make the menu font smaller when screen gets smaller.
At some point, the menu will be smaller than the logo. What should I add to make the logo scale with the menu? I already added:
img {max-width:100%;}
A picture of how it looks like on smaller screen (as you can see the logo is too big):
Try changing your media queries to something like this:
#media screen and (max-width: 800px) {
body {
font-size: 85%;
}
#logo img {
width:84%;
}
}
#media screen and (max-width: 400px) {
body {
font-size: 75%;
}
#logo img {
width: 75%;
}
}
and #logo to something like this:
#logo {
padding-right:12px;
border-right:1px solid #ea4a4a;
float:left;
}
Working Example
Note: Be sure to put #media screen and (max-width: 800px) above
#media screen and (max-width: 400px) as seen above.
See Why do the order of media queries matter in CSS? for more information on placing media queries in order.
It's admittedly not semantic... but have you looked into scalable text - FITTEXTJS
It uses javascript - but it allows the text to scale as well. You already have a solution to the image - But I see the problem lies in the text itself - Using media queries has you define break points, but doesn't make your text as fluid as YOU need it. I'll edit my post with a fiddle as soon as I come back from the gym, just thought I'd post this thinking it MAY be helpful.
You should set the width of the image wrapper (#logo in your case) inside the mediaqueries to get the image scaled. Or set it globally in percents (see jsfiddle link).
Also add max-width: 100%; for all images.
img { max-width: 100%; }
#logo {
width: 14%;
// remove max-width:100. not needed.
...
}
See http://jsfiddle.net/weP7u/ and resize the browser
I think your going about this the wrong way. Why make the text smaller when the screen is smaller? This probably occurs on a mobile device where you need to make sure you have touch targets that are big enough to reliably click your menu. You could keep the text the same size, and add padding/margin to make the touch target better, but that makes this menu even "bigger" next to the logo.
Instead at the smallest size, try stacking the nav underneath the logo and then once that looks lost as the screen gets bigger, bring the menu up to the right of the logo like you currently have. This neatly gets around doing any text or image scaling, while enhancing your design for small devices.
I put together a demo for you. Be sure to view the full preview so you can resize and see the new menu behavior.
You could use any pattern you want at the smallest size, I went with a simple stacked pattern because your menu easily fits in one row. If you had more navigation items in the future, you could do an accordion or even move to an off-canvas approach.
Further reading:
Check out Chris Coyier's post on making designs tablet friendly, some great tips in there.
Also, check out Trent Walton's short post about type and touch.
I'm playing around with media queries and started developing for a mobile screen. I have the first page relatively how I would like it, but I am getting a horizontal scroll bar at the bottom when I resize my screen to <480px. I haven't tested this on a mobile device yet but I'm assuming the same error will appear.
The site is: http://brad.sebdengroup.com/newOdynSite/index.php
To recreate error open the site, resize window to <480px and vertically scroll to the bottom
Here's the problem:
#main span.bold {
padding: 15px 20px;
...
}
#main span{
width: 100%;
...
}
This combination of CSS rules creates an element that's greater than the width of the page. Width 100% does not include any space used by padding, borders, or margins. For instance, if the page width is 480px, the width of the element will be 20px + 480px + 20px = 520px.
To avoid this, try wrapping the content in an additional tag, so that the width and padding can be applied to separate elements, and tweaking the CSS as needed. For example:
<span><strong>What have we done?</strong></span>
You can try to use overflow-x: hidden; on the <body> to simply hide the scroll bar. However, you'll not be able to easily see the content outside the view port.
For mobile devices you can use media queries to specify style sheets:
<link rel="stylesheet" href="styles/mobile.css" media="only screen and (max-device-width: 480px)">
Or you can use <meta> elements:
<meta name="viewport" content="width=device-width, user-scalable=no">