I have a toolbar, which includes many buttons(show in one line). Now I have a problem that when the window size is too small, the buttons will be covered. So I want the toolbar can adjust its width and height automatically, the covered buttons can go to next line to display. How can I realize this by CSS? It's OK if it needs Javascripts.
The style is quite same as Google Spreadsheet's Show More button.
Toolbar Style
i think,you mean you want to make it responsive according to the page size?
then you can use a meta tag in your html page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
hope this help you.
It's possible that applying a percentage-based width to your toolbar may solve your problem:
.toolbar {
width:100%;
display:block;
}
Related
To start off I am not an expert at this, as a matter of fact I'm following along in a online course. My test website comes out fine on desktop but on mobile it's misaligned and squished. I have already used this:
meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"
and other variants of this but nothing seems to work. Here is a link to the github page:
https://wunray.github.io/cv/
Can anyone explain to a novice what exactly is going on to cause this?
As far as I can tell, there's nothing wrong with your meta tags. It's just a css problem.
With these changes, your site perfectly fits on mobile:
You have some elements with negative right positioning. Either make them right: 0 on mobile, or add overflow-x: hidden to a parent element (ie. body).
Add img { max-width: 100% } to your css so images don't exceed window size.
The page design is breaking because of your css. Meta tag is fine.
In h1 tag you can use ->
word-break: break-word;
Also adjusting width of img will make the page responsive.
So I'm having an issue where my site has a lot of padding on the right side, making the layout load incorrectly. It appears correctly in on my desktop when the window is resized, but everything other than the header breaks when viewed on my phone. All of the relevant divs are set to a width of 480px, and I have the following tag in my header for the media query:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here are screenshots of how it appears on desktop and mobile, as well as a link to my mobile css page (the menu is open on mobile, but the extra space seems to affect it as well).
CSS Page
Edit: I'm now having a slightly different issue, where the margin has been added to the entire right side of the screen. I changed the pixel widths for many of the divs to 100%, as well as adding the <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> tag to the header. While they can no longer zoom out, you can just scroll the screen horizontally to find the padding. I'm also having an issue with my font-face tag, which no longer loads the header fonts. I updated the css file, so hopefully that shows why it won't work anymore.
Also, here's a link to the live site: Link
You shouldn't be setting explicit widths here, (at least not in pixels anyway) and from a brief glance at what you've posted I'd imagine that's where your issue lies.
Firstly, take off the widths that you've set for anything that you intend on being "full width" - remember divs are block-level elements anyway, so if you don't set a width at all, they'll have a width of 100%.
Secondly, take off any other pixel widths you're setting and change them to be percentages instead.
Thirdly, you'll save yourself a lot of headaches if you set 'box-sizing' to 'border-box' (I'd recommend just doing it on '*' for simplicity). This will prevent your padding and margin from being added on top of any widths you set as percentages; they'll be included in the box sizing instead.
Finally, I can't stress enough how important it is to get out of the mindset of things like "mobile" and "desktop". All we're talking about here is different viewport sizes. :)
If you have a live link you can share I'd be more than happy to have a proper look at this.
Add the following to your .css file:
img{max-width:100% !important}
I am building a responsive website. However, when I view it in a mobile mode, the content I have is just 50% of the screen and the rest is white space. May I know why?
Also, how can I make my background image of my home screen responsive? Sometimes it is responsive and sometimes its not.I don't know where I am going wrong.
Many Thanks in advance.
Check all the way through the white space for any div elements sticking out. There will be a div that extends the whole way across the page. Once that is altered to be the same width as the other content it will fit to the screen width.
You are probably missing the <meta name="viewport"> tag.
Read more about it here:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Try inserting this one first in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm trying to create a site using this theme - http://ironsummitmedia.github.io/startbootstrap-4-col-portfolio/
It's already responsive, but instead of images, I'd like them to be rectangle boxes that are links, and which, depending upon the size of the user's browser window, will always expand or contract to fit the browser window, with about 20px margin in between each one, evenly-spaced throughout.
Have no knowledge of Javascript, but am wondering if this can be done with CSS.
What I'm wanting is kind of like Chris Coyier's example here - https://css-tricks.com/examples/SeamlessResponsivePhotoGrid/, but need each rectangle to be evenly spaced and sized in the theme preview above.
Thanks for your help!
Oh, and if anyone knows how to Wordpressify it, that would be incredible!
by the looks of it, the site you provided uses the meta veiwport tag.
<meta name="viewport" content="width=device-width, initial-scale=1" >
But the tag only works well if your CSS sizes are %'s instead of pixels. (including font sizes)
It can do by using css3 calc() you can change size of you images parent div using calc dynamically
change your
<div class="col-md-3 portfolio-item">
to <div class="asd">
and add style like this
.asd{
width: calc(80%/4);
float:left;
margin:2%;
}
Live Demo
I'm working on a website for a small festival for a friend, but I'm trying to work with mobile browsing WITHOUT fluid layouts, ect. It's just a website that I want to use the classic viewport script so it will be at the minimum zoom when a mobile device comes to it.
HTML
<meta name="viewport" content="450, initial-scale=1, maximum-scale=1">
That's what I have now however I have tried this way as well.
<meta name="viewport" content="width=device-width,initial-scale=1">
Yet every single time I come to the site on my mobile device it's zoomed in so you can only see the logo.
What am I doing wrong?
Also there are 2 other things I've noticed when viewing on the phone.
The footer background colour doesn't stretch all the way across (and it's no different if I have device-width OR width="XXX"). Yet the width of my footer is 100%. I don't understand what is happening here.
And I'm trying to put padding, or a space to the left and right of the content so the website isn't resting right up on the side of the window. I want to have space to the left and right. I've tried to put this on the html tag but it only applies it to the left side??
I've gone to https://developer.mozilla.org/en/Mobile/Viewport_meta_tag & http://www.quirksmode.org/mobile/viewports2.html and other websites and can't understand what might be happening in any of these cases.
Any help, advice, direction or guidance is VERY much appreciated.
To fix the background issue try adding this:
body {
min-width: 1024px;
}
You have the top sections of the page inside a container with an explicit width (960px), which is why you aren't having an issue with them. The footer however is on its own without an explicit width set. You could also just enclose it in the same div with the id 'container' you used for the rest of the page.
This should also fix your padding issue. Make sure you are adding it to the content containers. For example:
#main {
padding: 0 1.5em;
}
As for the zooming issue, I am not seeing it on an iPad or an iPhone. Since you are not doing any sort of fluidity or responsiveness this is what you should be using. What initial-scale=1 is doing is zooming it into to its actual width, not fitting it to your screen.
<meta name="viewport" content="width=device-width"/>
You might want to check out this question: Android ignores maximum-scale when using fixed-width viewport meta-tag for the Android issue. I don't have an Android device handy to test so I don't want to give you incorrect info on that part.