I am trying to change our website ( www.enyx.sk ) from a floating responsive theme, to achieve a static width, which would address also lower resolution tablets and monitors.
The problem I having is with the menu items in the top navigation. The parent div itself is absolutely positioned but, since they are generated and need to be next to each other, the items are positioned relatively. Hovewer this causes a problem, when I try to resize my browser, or I check the resolution on the Nexus 7 ---> here
then the menu items appear one under another, to fill the sreen.
What I want to achieve is that they stay in one place like the "mozaic" under the menu, but I can't figure out how to do this.
Thanks a lot
Just take a look at your basic.css (should be within the ubermenu-plugin). Almost all widths there are given in percent.
On line 758 you can find:
#megaMenu.megaResponsive ul.megaMenu > li { width: 100% }
Furthermore on line 862 there is:
#megaMenu.megaResponsive ul.megaMenu > li { width:50% }
Delete both.
At least there is the following code in line 81:
#megaMenu.megaMenuHorizontal ul.megaMenu { width: 100% }
Change it to a fixed width (e.g. 1140px). Now everything should work in a correct way.
If you use Firefox you can use the add-on Firebug, which is a big help looking for that kind of stuff.
Related
I'm building a webpage for a client that I inherited from another developer. The link is: http://up8.431.myftpupload.com/. The client would like the phone number and the social icons in the top bar to display in the same style across all devices:desktop, tablet, and mobile. She doesn't like how when the display gets small enough the phone number and social icons stack on top of each other. That's fine but if there's no room to display them left and right but if there is, she would like to keep the same style. Problem is, I can't figure out how to make that happen.
Upon inspecting the element, I notice that each block has a width of auto, or whatever it needs to fit in. I've tried giving each block a display:inline rule in the hopes that they would take on the content width and align left to right and then I can just float the social icons to the right.
Tried something like this:
#top-bar-content, #top-bar-social
{
display:inline;
}
AND
.top-bar-left, #top-bar-right
{
display:inline;
}
What I hoped would happen is both blocks would display inline, back to back and I could just float them left and right respectively. What actually happened is the phone numbers changed its width to fit the content and floated itself to the left exactly how i wanted it to. The social block however, did not. It lost its dimensions; upon inspecting the element I find its width and height are 0x0. It remained in the same spot. Like I said, in my head I expected it to adopt its content width and sit right next to the phone number.
I'm sure this is just a noob error and I'm just not seeing what's in front of me. I really appreciate any help in advance.
I would change the parent div that contains both the number and social icons to display:flex. Then add justify-content:space-evenly or space-around or space-between (experiment between them) to the same parent element.
So you will have to use a media query to apply this for mobile devices only. When this is applied on desktop devices there is some interference from other classes and "::after" pesudo code.
#top-bar-inner {
position: relative;
display: flex;
justify-content: space-evenly;
}
This will do the trick
Ive been on multiple website where onload where the website is zoomed out to keep resolution and therefore stopping overlaps on the mobile page.
Im not sure i am explaing my question correctly. As i am a new member, i will add links to the differences.
I have tried some css3 media queries and some meta tags i have found online but nothing is working for me at the moment.
Here is the link to my site:
http://conorpendlebury.com/
As you can see from the image below there is overlapping with the navigation bar which pushes the content too far giving a squished appearance.
http://conorpendlebury.com/Images/Screenshot.png
Are you trying to make your #Sidebar to overlap your #MainContent and #Footer when activated while #Bio wont squish?
If so, make your #MainContent and #Footer with position: relative and z-index: -1 and remove whatever is making their marginLeft equals to document.getElementById('Sidebar').style.width while activated.
If you intended to make it squished, you need a function to recalculate and reapply css to #MainContent and #Footer.
To build a offcanvas navigation you set the page to translateX the size of the navigation. So the container keeps the width.
Here is a example.
It's possible to code this without JavaScript.
I'm new to this forum so hello to all.
I'm working on a WordPress website theme called tesseract. I am new to WordPress so have limited experience working with it.
The problem I'm experience is with the menu at the top of the page. If you visit www.avoinvents.co.uk and take a look you'll see that the categories don't sit on the same line. If I remove one of the categories the page looks much nicer and neater. All categories are necessary so I could not delete any.
Could anyone on here suggest how I make the necessary changes to fix the menu.
Many thanks
Here's the CSS that I changed in my browser to make the menu appear in all one line:
#masthead {
padding-top: 10px;
padding-bottom: 10px;
}
#site-banner-left {
width: 100%;
}
The main problem was that the site-banner-left CSS definition had a width of 60%, causing the text to wrap around its border, so I changed its width to 100% and added the padding to make the navigation area a little bigger. If this messes with other parts of the theme, try making the text size of the site-banner-left definition smaller instead of changing its width. Hope this helps.
You have limited the available width because an ancestor element, #site-banner-left, has a width of 60%. Increase this value or remove this rule to allow the entire menu to fit naturally.
Additionally, since the menu items are inline-block elements, you can force them to be on one line by setting the parent element's white-space to nowrap:
.nav-menu {
white-space: nowrap;
}
EDIT - As requested here's the Fiddle jsfiddle.net/daghene/eq4tfzLn/
I've already searched a lot on Stackoverflow and Google to find an answer to this but even if there's plenty I don't know why they're not working nor if I'm handling this layout correctly.
Basically I'm using Skeleton responsive framework to make a one-page layout and I have a section where there's a row with this image on the left and text on its right. Below it there's a small twitter paragraph with the latest news.
Basically my problem is: when the first row gets too small and the text starts getting long the image gets way too small and I thought the best solution is to vertically center it, but both it and the div's height are responsive(most solutions requires at least one of the two to be fixed height).
What's your suggestion and far more importantly am I handling this layout well on a logical perspective or is it ok to have paragraphs get THAT long with the image simply sticking to the top?
Note that it displays fine on desktop, tablet and smartphones, there's just that little part where it gets kinda weird...here's the screenshot of how my layout is acting, the third one being the one that I think should be fixed since it's kinda ugly to look at and maybe centering the image would help.
P.s. one thing I forgot, haven't put my code since Skeleton, as most responsive Frameworks, simply requires a .container class with .row and .X columns inside it to give the divs size and centering and I didn't add anything on top of that yet. The only thing I think I'll do is put the sections in a fixed height's div because I plan on making the user scroll them as slides and they'll always need to be 100% viewport height or at least a fixed height like say 600px scaling.
P.s.2 if the only solution is js since we don't know the paragraph's and img's height at all times go ahead and propose a solution, I'm asking if this could be done with CSS since I'm not that good at js yet.
I would give the thanksup row an id - eg vertical and then you can use the following styles to achieve vertical alignment:
#vertical {
display:table;
width:100%;
}
#vertical > .columns {
float:none;
display:table-cell;
vertical-align:middle
}
#media (max-width: 565px) {
#vertical > .columns {
display: block;
}
Updated fiddle
Not sure how to best ask my question. And I can't yet post screenshots. :( This issue does happen in mere current coding practices. You can currently even see this issue happening on Facebooks home page.
Here's my URL:
www.alpacanation.com
How to replicate live
Grab the right hand side of your browser and pull inwards. Eventually a scroll bar appears. Not necessarily bad. As I have a fixed with here. However… Notice the scrollbar is the length of the background color up in the top of my header which is actually creating a "Curtain" like effect.
Make matters worse:
If on other high level parent elements like .Footer or .Page you play around with overflow and position relative the curtain will then begin overlaying on top of the entire site.
Check out Facebook: They often have this issue as well. Obviously most don't notice it as it's not going over top of the content.
In either case I know there is something not right.
Help appreciated!
Add something like this to your CSS:
body { min-width: 980px; }
You have min-width: 980px; set in many of the elements on your page, but not on html, body, or .container. Once the viewport is smaller than this, these elements will overflow html and give you the scrollbars you're seeing.
But this doesn't make html any bigger. It--and its background--is still at the viewport size. This is why you get the "curtain" effect when you scroll.
Setting width: 100% on html doesn't fix this; this only sets html to 100% width of the browser window. If you're going to use min-width, make sure you you don't just apply it to elements that hold your content, but also those that have your backgrounds.
to fix this, add
html, body {
min-width: 980px
}
in your www.alpacanation.com/styles.css:40, then you are done. :)
EXPLANATION: the problem is this container,
<!— stat container —>
<div class=“container”>
<!— START FOOTER MENU SECTION —>
that container has width:980px which screws up the view because it forces that container to stay at 980px wide while the rest is shrinking, thus creates the ‘curtain’ like effect.