For some reason, Safari for iPhone isn't reading the responsive CSS, something must be stopping the it...but I can't find a bug or error. I've been through the CSS with a fine tooth comb and checked.
The live development site is at: http://k16.koogardevelopment.co.uk/
The root of your problem is that some of your divs have hard coded widths that aren't scaling down or reseting for narrow viewports. For example you have
body{
min-width:960px;
}
The divs I noticed that need attention are body, #main, #tweets ul, and #branding
Two of your options are to either change the width settings for these elements to something that will scale, e.g. { width:100%;} or use media queries so you can target and change them at specific viewports, e.g.
#media screen and (max-width: 767px) { /*adjust width as required */
#element-you-want-to-target{
width: Xpx;
}
}
Good luck!
Related
Working on this site: https://redheadedroux.com/
Using Sprinkle Pro Theme
The logo image is automatically designed to size down to 150px in height. I added this code to make it larger:
.header-image .site-title > a {
height: 300px;
}
It looks perfect on the desktop view but now when I view the site on a mobile view, I'm left with large padding space between the announcement/hamburger menu and the first widget. I don't want there to be all of that empty space between the logo and everything else.
I've tried adjusting things in the #media areas already within the theme itself, but nothing seems to work. I feel like it's a matter of selecting this height for a different #media area? But I can't seem to get it to work. Any insight?
Thank you
Photo of what it looks like on mobile view:
Checking your site I can't see any problem at all. Everthing works as You have decided.
If you have the rule:
.header-image .site-title > a {
height: 300px;
}
and you are not happy how it looks on mobile, change it with media queries
like this:
#media only screen and (max-width: 600px) {
.header-image .site-title > a {
height: 120px;
}
}
Just use the window width when you desire to use the change of height and be sure the rule is placed at the bottom of you css sheet.
Figured out my issue. I ended up applying this specific code:
#media only screen and (min-width: 600px) {
.header-image .site-title > a {
height: 300px;
}
}
It left the logo sizing alone for any screen size below 600px. But for anything 600px and above, it made the logo height 300px, which is exactly what I wanted. The padding around the logo image on mobile devices is no longer there.
I'm having trouble on a clients website.
In the header, I have their address and social media icons. Everything is the way they want it until the width starts to shrink to more of a mobile view. I've been trying to change the text-align of .social and .address from right to center when the small-12 grid size kicks in. However, for all my efforts, it either stays with one or the other and doesn't switch when the grid system switches.
I've deleted my efforts currently in hopes that someone can help me with a better implementation method.
You can use media-queries. Look them up here - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Add the following CSS style to your website (either in the app.css file or any other file that you include in your target page.)
.social-icons{
float:right;
}
#media (max-width: 600px) {
.social-icons {
float: left;
}
}
The above CSS would float any element with class .social-icons to right by default.
In case the website is being viewed on a media screen which has a screen width less than 600px, would float it left.
Im using the bootstrap 2.3.2 css framework to set out the interface for a web app. Im using the responsive version of the framework.
The application dosnt need to be mobile + tablet responsive, but im using the responsive version so the interfaces scaled horizontally on wider monitors (a large part of the UI is tabular data so users with bigger screens will appreciate being able to use the full width of their screens).
Is there a way i can use the responsive features of bootstrap, but stop them being responsive after a certin point - ie. at < 1000px the interface would no longer be responsive (a user could still make it larger, but not smaller)
Essentially i want to stop the span and offset elements that make up the grid scaling after <1000px
I have modified Bootstrap to not include the responsive features for devices under 1000px.
This example should demonstrate this: http://floating-wildwood-8562.herokuapp.com/examples/grid.html
You can use this modified responsive bootstrap css file here.
This required two changes to Bootstrap's LESS files and a rebuild of the framework.
Shown here and here
You may also decide to add this to your css:
html, body {
min-width: 1000px;
}
This way the window will be forced to be at least 1000px.
Haven't used bootstrap, but it must have a css, u should see how u called your main wrapper and at the end of it add.
#media screen and (max-width: 1000px) {
#main_wrap {
width:1000px;
}
}
I re read your question and this is what you have to look for example, you keep the main wrap at 100% width, but theres some elements like image wrappers text wrappers, etc... so... look for all of them in the css (not media queries) and place a min-width... example
/* ------ NORMAL FORMATTING Examples */
#img_wrapper {
min-width:300px;
}
#text_wrapper {
min-width:400px;
}
#logo_wrapper {
min-width:100px;
}
/* ------ Media Queries */
#media screen and (max-width: 1000px) {
#main_wrap {
width:100% /* ----> This keeps 100% for responsive */
}
}
why this U don't have to query them when they achieve to that min-size they wont resize anymore, they will stay that size even. if the screen keeps resizing.
I hope this helped
If you wanna query them then don't put a min-size just give them a exact width
#media screen and (max-width: 1000px) {
#main_wrap {
width:100% /* ----> This keeps 100% for responsive */
}
#img_wrapper {
width:300px;
}
#text_wrapper {
width:400px;
}
#logo_wrapper {
width:100px;
}
}
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;}
I've seen many WordPress themes that adapt to mobile interfaces/smaller screens using only CSS. Any ideas on how it's done?
For example, the theme Foghorn has a sidebar that disappears in a screen less than 750 px wide. I've looked at the code and I'm very sure that it is done with CSS.
I'd like to employ such a design in a website I'm making.
Thanks for any ideas!
You need to use media queries in your CSS.
Example:
#media screen and (max-width: 750px) {
.someClass {
display: block;
}
}
Everything inside that #media block will be applied only if the screen width is 750px or smaller.
You can also do things like min-width or combining both.