I would like to know how best to accomodate the JUI accordian in a responsive design using media queries. It seems that the accordion requires more space than the div that holds it... possibly margin settings?
I ran into this problem when I tried to have two accordions side by side and responsive using media queries
#accordionA,
#accordionB { display:block; width:100%; }
/* Double Column breakpoint at 576px */
#media all and (min-width: 36em){
#accordionA { float: left; width:63%; }
#accordionB { float: left; width:37%; }
}
On a large screen the accordions are not rendered, but are identifiable as elements in the console.
If I reduce the window size they appear, but only at 520px.
I made the change to
#accordionA { float: left; width:55%; }
#accordionB { float: left; width:30%; }
and now I can see both accordions but with some of the screen unused. I could contiue to guesstimate the maximum % i can give to 2 accoridons, but I would prefer to understand what is happening here.
Why, and how much, space does the accordion widget need?
In case anyone creates this same problem for themselves the problem lies not with jquery UI accordion.
Because it is likely that the 2 accordions are of different heights remember to
clear: both
after them to stop the following div interfering.
Related
I have a problem with my website. (www.cemf.ir). The footer has three columns and everything works fine (links are clickable) when it has three columns. However, when I resize the browser and the width gets smaller, the number of columns in the footer becomes one and only the links in the last part of the footer works. I guess there is something wrong with .column-wrapper class in the css when the screen width gets smaller. Can anyone help me?
Setting the float of the last column wrapper should work.
#media screen and (max-width: 767px)
.site-footer.three-col .column-wrapper:last-child {
float: left;
}
For some strange reason whose cause I can't find out, the very last .column-wrapper in the footer covers (although transparent) almost the whole screen on mobiles, including most the other footer elements, and also doesn't let any mouseclicks through.
In the browser code inspector adding the following CSS setting made the links in the other footer elements clickable:
#recent-posts-5 {
pointer-events: none;
}
I could find a good solution for it. I used z-index property as you see below:
#media screen and (max-width: 767px)
.column-wrapper:last-child {
z-index: 1000;
}
.column-wrapper:nth-child(2) {
z-index: 1001;
}
.column-wrapper:first-child {
z-index: 1002;
}
z-index put columns layer on layer and the problem of the last column-wrapper was solved, since it is now under all the columns in the footer.
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;
}
}
PROBLEM:
I'm currently working on a from-pdf template; I'm relatively new to responsive design and am having an issue with the following: I have a button at the bottom of the page that I'm currently centering using a set margin-left value. However doing so prevents that button from 'floating' all the way to the left during screen re-size.
GOAL:
Have a solution that allows the button to be horizontally centered during 'full size' browser, but collapse and float all the way to the left when the browser size is decreased.
TRIED:
Setting padding/margin
Setting both of the above to auto
Thought about a horrible conceptual ghetto hack (I could technically make the image a long white rectangle with the button centered then make the image fluid, thus re-sizable)
WEBSITE IN QUESTION (OBJECT: ORANGE BUTTON NEAR FOOTER):
http://thedma.org/the-state-of-data/
Here you have a working fiddle
The trick is:
a {
display: block;
text-align: center;
}
img {
max-width: 100%;
}
assuming that a selects the link corresponding to the button and img is your image.
You want to use media queries for this. Specifically viewport-height or viewport-width from the sounds of things.
Link to documentation.
Basic idea:
#media (max-height: 600px) {
.bottom-button {
/* styles */
}
}
#media (min-height: 600px) {
.bottom-button {
/* different styles */
}
}
i'm trying to change the column size of the moodle theme 'clean' which is based on bootstrap.
My Moodle uses a three column layout. The left and right columns are too wide and i'm want to make them more narrow, so that the column in the middle can be displayed wider.
Moodle offers a textarea in the administration interface to add your own CSS code.
I added the following code:
.row-fluid .span9 {
width: 80.0%;
}
.row-fluid .span8 {
width: 80.0%;
}
.row-fluid .span3 {
width: 15.0%;
}
.row-fluid .span4 {
width: 15.0%;
}
It all looks good on desktop screen, but if i scale the browser window down to simulate a smartphone resolution it doesn't work. The left and right column move to the bottom like they should, but don't use the full width of the screen, but the 15% i defined in the settings.
I guess i am using the wrong class and overwrite the size for desktop and mobile design.
If anybody knows how to change the column size in the desktop version without overwriting it in the mobile version, that would be great !
In Bootstrap, all span* elements revert to 100% width at 767px and below and below:
http://getbootstrap.com/2.3.2/scaffolding.html#responsive
What's happening is that you're setting the width of those specific span elements much later on down the CSS file and therefore overwriting the section of Bootstrap which sets the width to 100%.
To follow on from what you're doing, the answer is to ensure that you reset the width back to 100% at that break point:
.row-fluid .span9 {
width: 80.0%;
}
.row-fluid .span8 {
width: 80.0%;
}
.row-fluid .span3 {
width: 15.0%;
}
.row-fluid .span4 {
width: 15.0%;
}
/* set back to 100% for smaller screens */
#media (max-width: 767px) {
.row-fluid .span9,
.row-fluid .span8,
.row-fluid .span3,
.row-fluid .span4 {
width: 100%;
}
}
Just as an additional comment for you: the whole point of Bootstrap is really to avoid hacking into the grid like this if at all possible. I suspect you'll find that forcing these widths here will also have knock-on effects elsewhere on your site.
Each 'span' equates to roughly 6% in width (not taking into account the margin between each), so a better answer to your requirement would be to edit your page markup. Where you're currently using .span4 and .span3 and subsequently forcing them to 15% these could be changed to .span2 which would be roughly the same as your currently-forced 15% width. Then tweak the other span elements which fall within that row to take up the empty areas.
I did try for increasing the width of the Middle column so that we can view the contents without scrolling it.For that we no need to write any coding.Just go to "Theme Settings" and then to "theme designer mode" and the check that box, so that we can go for our own theme.
Then go to " theme selector" then "clear theme cashes" and click "change theme".
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;}