I'm using the bootstrap framework and i am trying to make it fluid, so it views "perfect" on every device. However i am currently experiencing a problem which i can't solve. The textfield starts on a new line at some point when you resize it. (Live Demo: http://veiling.jamieknoef.nl, the login textfields) It should stay in line.
Any suggestions?
Try:
.login { min-width: 140px; }
That being said. Once the screen starts to get that narrow you need to look at possiby rearranging your layout as its going to have all sorts of problems on smaller devices - which is where media queries come in.
Related
I'm trying to create a survey for a client. Everything good however when I visit the survey on mobile devices (small screen sizes) some of the survey is popping out of the screen which makes it unusable.
I tried to change the size of the survey with width but it doesnt change.
I've read that it might depends on inline, but still no change.
The Website (made with Wordpress):
https://survey.xs-sol.com/
Here's some pictures:
Everythings fine
Here's missing some survey
(this is 1 to 1 copy from mobile, so the cut is the issue)
What is it, that triggers the issue?
Problematic is the selectbox under "What is your working environment?" - the second option "Shop (Food, El..." is quite big, so on small screens where there is not enough space, scrollbar appears.
Add select { width: 100%; } to your styles to solve this issue.
I have a website that I am working on that has a simple widget that shows the current status of certain systems. The problem I am having is that when the view goes to mobile (iPhone size about) or the screen on a browser is creating the same effect, the rows that have objects in them start to stack and become invisible or cut off. I don't want these to ever stack because the design doesn't make sense that way. Is there a way to make is so something will never stack? I can't seem to get any clues as to how to fix this since the bootstrap choices don't go that small. It seems like it would work if there was a col-xxs-* class or a col-mobile-* class.
You can customize twitter media query breakpoints
so the col-xs-* can start from 200px instead of 480px for example.
here is the link:
http://getbootstrap.com/customize/#media-queries-breakpoints
Edit the variables and download that version. you can also use bootstrap Less to edit these variables in your project as it suites you instead of re-downloading the files every time.
I'm not sure if this helps,
Make sure the viewport is configured correctly:
Make sure you don't have content that is wider than the viewport.
For instance if you have an image that is wider than the viewport set the CSS to
max-width:100%;
From what I can understand you don't want to stack the divs one below the other in mobile view. Then try to use class like table-responsive that allows the content to appear with a horizontal scroll bar.
Then you have to set the min-width for those columns that you don't want to wrap.
Or white-space:nowrap
The issue that I was having is there was a custom div class that was put into the hosting software's global styling. This class duplicated the idea of the Bootstrap col classes. It started from col-all-12 to col-all-1. The problem is this would override all the other bootstrap styling and make things a certain size no matter what width the screen is. I appropriately adjusted these and it seems to work. I had to rebuild this code from scratch but now it is good!
Thank you to all those that helped and gave suggestions!
juniorgoldreport.com is the website I'm working with. On regular desktop view its fine, when I shrink the window down smaller and smaller it seems to act responsive and it's progress. It is being made in wordpress.
When I view it on my smartphone, (LG G4), there is a huge white space to the right of the website and I cannot figure out why. I've been using inspect element via chrome to trouble shoot, but being on a cell phone I dont have that option so easily.
Does anyone have an idea?
Here's an image of the issue when you search the website on a mobile device:
Along with that too, if you guys easily know in my header my logo and my social media/subscribe button are really difficult to align center so its even on both side and they're aligned vertically.Any hints or ideas on this one? I'm much more concerned with the mobile issue though.
Looks to me like it's
.page { overflow: visible !important; }
in line 3308 that's causing the issue. Not sure what purpose that's serving, so you can take it out, but it might cause other issues.
Remove left: 50px; from .site-main .sidebar-container and the gap should disappear.
I'm making a fairly simple website, and i'm having some trouble due to being new to this. I have it so it's a responsive website, but adding links to websites that are a bit long wont automatically chunk into smaller sections to fit on the screen, but just run off the screen and out of the container.
What do i need to do to make it so my links scale responsively on mobile devices with the rest of my website? The rest of the paragraph acts responsively based on the screen size, but if i add a link that is somewhat long, it will just run straight off the screen since there are no spaces for it to use as a break. How can i fix this? text-overflow?
Thanks.
I'm assuming you mean that a very long string (without spaces) is causing this problem.
Use the CSS word-wrap property.
a {
word-wrap: break-word;
}
See here for more information.
I am currently practicing creating responsive websites.
I have a problem with the side bar on this website,
I don't believe I know how to correctly position this,
and I also don't know how to keep it from moving down when the screen width size decreases.
How can I fix this?
I have such a hard time posting code, I can't seem to get it to work past the first line or two.
I added a jsFiddle with all of the code. I made a comment where the sidebar,
.other, in my css code.
http://jsfiddle.net/jwn69/
css :
/*
Well, first, i woudnt rely on properties like 'float'. They're tricky and can get a lot of repaints in some cases, which slows down your application.
To make what you wanted, i had to change de .focus and the .other classes
.focus {
width:66.00625%;
display: inline-block;
/* 844.8px / 1280 */
background-color: #3d3c3c;
}
.other {
width: 30.99375%;
display: inline-block;
vertical-align: top;
/* 1.5% allowed on each side*/
background-color: #3d3c3c;
}
I must also warn you that responsive design isn't about doing a couple of css rules that works under every condition/screen-size. With a little more CSSing, you'll get this page looks better and eventually it will be useable on any device. But, for example, mobile apps doens't have a menu like the one you're building. It uses drawer menus and other things to show links, because their space is limited.
While you can achieve to show these contents on a very a huge screen or a very tiny, it isn't enought because every device has it's own better way to show your UI components.
So, i'd suggest you read about media-queries. They're usefull to make specific CSS rules for devices that fit a certain condition.
Then, i'd suggest you learn how to positions work in CSS
Heres your fiddle