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.
Related
Trying to develop a webpage with jsps and some css.
Encountered a problem with media queries.
#media screen and (min-width:500px) {
#first_area {
display: none;
}
}
This is the code that I typed on css file that is linked with my index.jsp.
But the section that is wrapped with div tag named id='first_area'
does not change (first area does not disappear) even when screen is smaller than 500px.
I am wondering if this is a problem with my code/ or media queries are only supposed to use with tags that already exists? (ex. div, span)
What I am trying to do is making the index.jsp page responsive.
Please help.
If you want to hide the div if the screen is smaller than 500px you should use max-width instead of min-width.
#media screen and (max-width:500px) {
#first_area {
display: none;
}
}
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!
Website: www.tarbooshla.com
When viewed on a mobile device, the search icon is not aligned with the rest of the navbar (the logo and the menu icon). How can I fix this?
I have tried updating all the themes and plugins to no avail.
It seems to be displaying exactly as intended with the current rule set. I'm assuming you want it to populate on the right? I was able to move it substantially with the padding property, however I don't think that's the best scenario for you. The search icon is currently not text at all, but a pseudo element displayed in an ::before scenario, if you want it to show up after when it reaches a certain size, I recommend having a media query that sets it to display:none; and an ::after pseudo element that displays when it gets to your smart phone #media and screen (max-width) size.
It is happening because of the limited space in mobile devices.So what you can do is go inside the header.php and put the search bar inside the main navigation bar along with home,about us, etc so search will appear once the user press menu button.or with the help of css,align the menu to the left so that search button can fit into the right.
This code may help you. Make sure to add this CSS code at a place so that it loads after all other css is loaded ( therefore taking maximum priority )
#media only screen and (max-width: 767px) {
#Top_bar .logo {
text-align: left;
}
#Top_bar .top_bar_left {
float: left;
width: 80% !important;
margin-top: 10px;
background: none !important;
}
.header-classic #Top_bar .top_bar_right {
top: 15px;
float: right;
}
}
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'm working on a site using the Bootstrap framework and noticed that on mobile devices there's an empty white margin on the right hand side of the window. I believe this is some sort of issue with the tag although I can't pinpoint it.
There are 20px margins but if I remove them the .brand logo shifts partially off the screen on the right hand side.
You can view the problem here.
Sorry to not provide the code here. I'm just not even sure which CSS to provide as I can't identify the problem.
In the block which had the heading 'Download original swipe files to ensure your success.' you have the text, an image to the side, and the caption 'one click download of swipe file'
The caption is actually a svg file and I think at some viewports it's too wide for the bootstrap column and it's disrupting the grid. I can't tell for sure, but you could try temporarily removing the caption and see what happens.
The behaviour I'm describing is most obvious when the browser window is around 780px ... it's always possible that we are looking at different things ;)
Good luck!
.navbar .brand has
margin-left:-20px;
so the behavior seems normal to me.
Set it back to 0 via your mediaquerie
edit : remove padding on body at :
#media (max-width: 767px)
body {
padding-right: 20px;
padding-left: 20px;
}
and margin at .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top :
#media (max-width: 767px)
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-right: -20px;
margin-left: -20px;
}