I'm trying out Material Design Lite to make a nice-looking webpage for a school project. I'm having an issue where the sandwich icon in the header is off-center for seemingly no reason.
I copied and pasted the exact source from the fixed header example here (click the CodePen button to see the exact full source I'm trying) and it doesn't appear the way the examples do.
Is there something I'm missing? It's been a while since I've done HTML/CSS but I don't see why this would be happening. Could it even be a bug? Thanks.
I wish I could add a comment to help. Unfortunately my score is too low.
I went into the fiddle i believe you created and cut and pasted the info from the code pen. It looks like it is working. Please post the code you are using. Also you mentiono a fixed header but it looks like you are taking the header titled Scrollable Tabs. Correct?
I would be happy to help, i could imagine there is something in the CSS unless you're not using any of your own style sheets. #Jainam is on the right track by asking if you could set up a fiddle.
Related
(General Kenobi).
Alright, enough fun lets get to the point. I have a question about Wordpress for you guys and I hope you can help me with it. My theme supports an image as an "ad" which you can place below header (menu) and above content on the site. It is not a background, you can set BG of a page and then in theme options add image to be shown.
The problem is, this picture is now on every page, article, everywhere on site. I can live with that but I would like to know if its possible to somehow change HTML or something of a single WordPress page and replace the logo with the different image? I clearly can't do that in editor as it supports only one image for everything so that's why I'm asking to try out code change. I tried to get to the HTML but in WP Editor it shows only a few lines of PHP code.
As I'm typing this I'm realizing some huge problems it might have but I'll post this anyway, maybe some of you will have a great tip :) Thanks for helping me out in any way!
Michal
So working on this website and faced with an issue of blank space on the right side of the page on mobile view. I've looked at everything and still cant seem to get rid of it.
I deleted each section of the site hoping to find the area where the issue was (overflowing form something I thought) but it was always there so I don't know what to do.
[link removed] is the site on the dev server.
Im really stumped by this so hope someone can help me. Thanks in advance
The issue is visible only on mobile and almost no way to debug that (well there is a way, kind of a hard way to debug that).
Any long story short ... i suppose one of the page elements is not behaving as it should in mobile view. With this i mean, an element, element X for example is wider then the width of your mobile screen so it creates that white screen issue.
What im gonna propose here is not a 100% solution, is more like a workaround but it will work if the issue is what i supposed:
Apply this css rule on the body tag:
body { overflow-x: hidden; }
http://validator.w3.org/nu/
Copy Paste your url or paste your code (at the "Check by" dropdown) and you'll see unclosed elements.
Close your elements, I think there is the solution
Thanks to everyone for your help. So I found the issue, As Arber suggested it was an element behaving badly. It was the contents of the carousel overflowing causing whitespace to appear, so I was able to rectify the problem. Thanks again! Tthe validation helps with a few other side issues too.
What's the code to make a text, or a picture flow in on my website. A good example is this website: https://isephful.com/ As you can see, the icons pops out whenever you enter the website. I've tried looking at the HTML, without any luck, couldn't see what's used. Could someone please just tell me what code was used etc.
Thank you.
It's a matter of using jQuery method .animate. Making more advanced websites with only html and css will give you hard time.
I'm a newbie and I have tried hard to get out a page.
After many trail and error this page finally looks "ok" though some of the part I don't know how I get it "right"
But when my page is opened in Firefox its bloody twisted! the table jumped out of boundary.
here is the format in chrome and IE(which is right)
and this is the format in firefox
the table shift out of the container and shift up.
I've search about use css reset but I dun't know how to do it,(what should I add to where)
or I should edit my html or css?which part of css I need to edit?
thanks in advanceļ¼
I have solved this by put all shifted table into a container to fix them.
and it works! thanks guys for helping me.
I have an HTML page that contains a table. The table headers get eventually scrolled off the top of the screen, but I would like the headers to stay visible at the top.
I want to use a method like alaskaair.com's "Fares Selected" widget. Their little Fares widget stays visible as you scroll the page: Screenshot of alaskaair.com widget.
Note that in my case it would look more like this: Simple Mockup
I use xTableHeaderFixed to freeze my headers:
http://cross-browser.com/x/lib/view.php?s=xTableHeaderFixed
I was in a similar situation recently (creating an inbox-style display for notifications), and after some googling, I came across these:
http://www.imaputz.com/cssStuff/bigFourVersion.html
http://www.imaputz.com/cssStuff/bulletVersion.html
I'm presently using (1) and I haven't encountered any issues with it so far. You can follow the discussion of the solution here.
EDIT
I just re-read your question, and I guess this isn't exactly what you were looking for. Still, maybe it'll be useful to someone else.