I installed the Ubermenu plugin on my site here:
aep.gov.tr
The widths of the menu items are too wide. Therefore the menu does not fit into its container as shown here:
How can I make the width of the menu items narrower?
This is more of a CSS question / issue than related to Wordpress. Your main problem is this right here on line 36 of your style.css:
.navigation ul li a{display:block; float:left; color:#666; text-decoration:none; padding:15px 0 0 0; height:28px; width:130px;}
You need to remove the width property of your <li> tag here. This will bring your menu up on one line.
So what you will have is this instead:
.navigation ul li a{display:block; float:left; color:#666; text-decoration:none; padding:15px 0 0 0; height:28px;}
I would suggest playing around with your width properties and your height properties to force the menu to look right. Another suggestion is to use Firebug for Firefox or for Google Chrome to help debug CSS issues. It helps you find them fast.
Go to admin.css file and note that you may loose your warranty, change the following:
#megaMenu.megaFullWidth
{
width:100%;
}
to
#megaMenu.megaFullWidth
{
width:auto;
}
Hope it will help.
Related
Below are some images of the form which I want to show a dialogue over, and want to blur the background. This works fine on other browsers but in Chrome Version 62.0.3202.94 (Official Build) (64-bit) It is creating problems
Here is the layout and the checkbox,
Its a toggle button to change size input fields
Here is the css for the checkbox
opacity: 0;
padding: 0;
position: absolute;
margin-top: -999999999px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
After applying the blur filter my form is emptied.
Just writing here for the question, I found that the margin-top: -99999999px is quite a big number and when I changed it to margin-top: -999999px it worked.
I was about to ask why my elements are not visible on the page, but as I already have fix it, I want to know the reason for it and to put this question here for other developers.
For me, the issue was with a checkbox positioned absolute and having very high negative margin top. Lowered the number and it is fixed.
I tried many things, but until now, nothing happend. My footer won't fill the page (horizontal), but get stuck somewhere in the middle of the page. (Only on an Ipad and Iphone.)
a meta tag don't work and instead of min-width:100%, min-width:1024px; neither works for me.
A fixed positioned footer is no option... (the footer has to flow with the content when more text is edit.)
This is my CSS code of the footer:
#footer_content{
min-height:200px;
min-width:1024px;
float:left;
background-color:#29809E;
bottom:0;
}
Set same backGround color for table view and the main view
try setting the viewport to 1.0
further a clear:both might help
Also here are some good explanations on how to use viewport ...
iPad specifics: http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/
generic" https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
Make This:
#footer_content{
min-height:200px;
min-width:1024px;
float:left;
background-color:#29809E;
bottom:0;
}
This:
#footer_content{
min-height:200px;
width:100%;
min-width:1024px;
float:left;
background-color:#29809E;
bottom:0;
display: block;
}
And then add a clear: both right after you close the footer div.
Just finished installing G+, Facebook Like and Tweet buttons onto my site (www.biginjapan.co) on each individual post. My issue though is that when you press the FB Like button the popup box opens up so you can share the article if desired, but part of it appears behind the sidebar. It looks like this:
Picture showing my problem
Am not sure if you'll need any code to advise me here, but if you do please let me know. All I want to do is make the Facebook popup appear above the sidebar so you can view it properly.
In your content div
#content {
overflow: hidden;
float: left;
width: 619px;
padding: 0pt 15px;
}
Remove overflow hidden.
Remove the line overflow: hidden for #content. it's on line 247.
It is layer issue. It can be handle by z-index. For the slider layer (content), use lower z-index means
.slider{ z-index: -1; }
For the popup layer (content ) use higher z-index than slider
.popup{ z-index: 123; }
When I view www.americaspoeticsoul.com on my iPhone, the menu overflows for some reason. See:
And it even looks worst on the other pages because of the title:
Anyone know why it's like this? And is there a way to fix it? Here's the CSS for the menu:
/*Menu*/
#menu {
margin-bottom:15px;
width:450px;
}
#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
float:left;
}
#menu ul li a {
display:block;
padding:10px;
margin:2px;
background-color:#D41C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#menu ul li a:hover {
display:block;
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
#menu ul li a.current_link {
display:block;
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
Thanks,
Nathan
As an iPhone user and developer - I wouldn't use a site like yours on the phone unless I really had to - it would require all sorts of zooming in before I could read or click on that menu.
If you have content that you would like to present via a menu on an iPhone, I would recommend detecting small-screen mobile browsers and redirecting them to a mobile specific menu at the very least - jQuery Mobile is so easy to use to create a menu.
This is just a response about iPhone or similar size screens - I'm sure you'd want to fix this on an iPad if it looks the same.
You're not setting an explicit width on the menu items which leaves their width at the mercy of the browser and how large the font-size + margins and padding end up being. In the case of mobile browsers (Android too), your width is just too much for the 450px that you have. Try dropping the font size a point or something.
You're discovering one of the downsides of relying on text/fonts within your menu system. There is way too much variability (OS, browser, device, etc.) to expect the text to always behave properly or even use the font you intended.
I use a graphically created menu system which never changes no matter what and a simple text menu in the footer as a fallback.
You could try adding this to your CSS file:
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
This will stop Mobile Safari (and Windows Phone) from adjusting the size of your text in an attempt to make it more readable.
EDIT: If you only want to affect the text-size-adjust on mobile phones, you could use a media query:
#media screen and (max-device-width: 480px) {
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }
}
If you're feeling ambitious, you should consider adjusting the layout on a more fundamental level for smaller screen sizes. Any CSS you put inside that media query will get applied to devices that have a screen size of 480px or less.
For example, the buttons may be a bit too small for fingers to reliably tap on them. A better alternative would be to linearize the layout so that there's only one column and each link button takes up the full width of the screen.
Safari renders black lines in between divs on my website at some scales. It is particularly bad when it breaks apart an image that is chopped in two different divs for a button or something. I can't put a BG in the parent of the two divs because they are transparent .pngs. Any solution or just deal with it?
capture of the problem, http://i.stack.imgur.com/pTLki.png
TravisO also has the same problem, and I changed how the page was laid out, originally it was a simple table with 5 rows, I removed the rows and just went with images and br, still happens. I've tried to remove all padding and margins via CSS but it was pretty obvious the problem isn't the browser rendering, but with the resampling the browser does to convert the page into a size that fits on the screen. You can see my broken page at:
http://www.apinkdoor.com/show/
TravisO, you should get rid of the img styling in your css!
If you use only this:
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
body
{
background-color: #f00;
text-align: center;
}
</style>
it should render properly on your iPhone!
This issue is a result of a rounding error produced in mobile safari when it rescales background images for display (it's a bug: http://openradar.appspot.com/8684766).
The solution is to increase the width of your right-button edge on its left side by 1 or 2px. Then adjust your CSS accordingly so the 1 or 2 pixels you added are not displayed by default.
The following CSS, added to the problematic div with a specified background-image, is what fixed it for me. Anything less than 3px would still show light artifacts at some Safari zoom levels.
margin-top: -3px; /* for Mobile Safari dark line artifact */
padding-top: 3px; /* for Mobile Safari dark line artifact */
I found changing the background colour of the element with the 'grey border' around it worked for me.
Adding an initial-scale value to the viewport metatag resolved this issue for me.
<meta name="viewport" content="initial-scale=1.0">
I had a similar problem when displaying a .png-image in a div-tag. A thin (1 px I think) black line was rendered on the side of the image. To fix it, I had to add the following CSS style: box-shadow: none;