I work on a school project that has a website. The website is made by other graduated students and I have almost no HTML or CSS knowledge.
I want the website to be more mobile friendly, meaning that every frame and object gets resized according to what display size you have. Now there is text outside the display, iframes being too big, e.t.c. I have tried to fix this for hours by searching online without any major results.
The thing I've discovered is that changing from overflow-x: auto to overflow-x: hidden (in a CSS file) can help to remove overflow/bleed.
If you have any tips on how I can improve this page it would be strongly appreciated. Feel free to inspect the code using browser tools (CTRL+SHIFT+I).
How do I resize iframes, text, images, e.t.c. according to the width and height of the display?
Why is the footer text outside of the screen, and how can I fix it?
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
read this, you can also use bootstrap grid to make things easier
For skips the most of overlaps that could occur in the page, try to use the configuation below:
html, body {
// reset the browser config
margin: 0;
padding: 0;
}
* {
box-sizing: border-box; // padding and border will not be added to width and height calc
}
img {
max-width: 100%; // protect from images be more large than the container
}
// https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
box-sizing: border-box; will help you in mostly cases, but in some cases, after you inspect the element with overlap width, will can use the calc() to fix it, like:
element {
width: calc(100% - 30px);
}
In you case at https://aqpi.se/karta.html the problem is you setting a fixed width on the iframe element.
With overlap
Without overlap
Responsive web sites are created with media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp.
Related
i've been trying to build this blog to post my stuff.
I've started by taking a free theme and making some modifications to colors, shapes, positions, etc.
And in smaller resolutions such as 1366x768, it looks just fine. But in greater resolutions like 1920x1080, there is just too much empty space on the sides. I'm still an amateur on html and css, so I would really appreciate some tips.
Here's the site, as I couldn't post the code, cause stackoverflow seems to think it is spam.
https://saturnario.blogspot.com/
You can use percentage on width and play around with it.
body {
width: 100%;
}
div {
min-width: 80%;
width: 800px;
}
min-width will make sure your content cover 80% of the body page. And width will make sure your content is 800px. So when the page size hit one of the limit, it will stlye accrodingly.
I'm in the process of making my wordpress website responsive. I have two images on the page I'm working on which I want to set a max-width on of 100% to make them responsive (this is what I did on another website I made and it worked beautifully). However, I have noticed that as I shrink the page in Chrome dev tools the <html> and <body> elements are shrinking to really odd sizes, completely unrelated to the viewport size. Below are screenshots of the and elements, respectively, being hovered over in chrome dev tools:
And, of course since max-width with a percentage value, "Defines the maximum width of the containing block" and the containing blocks here (<html> and body) are resizing themselves in this unusual way, when I set the images to max-width: 100% they base that off the weird size of those elements.
The only CSS I have on these elements is:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
So my question is, where on earth are the <html> and <body> elements getting their size from?
This behavior first began happening a few versions ago in Chrome; try testing your site/screens using FF (Moz/Firefox) responsive dev tools -- my guess is you'll see the results you expect. But this isn't necessarily an issue with Chrome; in my case it has something to do with environment. These days I work mostly with AEM and if I test in auth mode/disabled (or straight-up auth mode) this issue will occur. But if I view the same page live in production = no issue. So my guess (for us at least) is that it has something to do with the CMS or the server setup. I tend to use FF responsive dev tools these days -- give that a try and let us know how you make out.
html, body{
margin: 0; padding: 0; width: 100%;
height: 100%;
overflow-x: hidden !important;
}
Check to see that your zoom level is set to 100% (normal), in your browser.
I just manage to fix the same issue.
The problem is that the text forces the viewport width. You just have to ajust the font size to fix the issue.
I am creating a mockup for a new UI using Angular and Material design elements, however I am experiencing trouble attempting to get the area underneath my toolbar to take up the remaining vertical height of the page.
Here is a link to my code example
I have Googled the problem and the only thing I have seen is the solution to set
html, body {
height: 100%;
}
However I have not found this to be a solution.
I was thinking of perhaps using a flex box, but I am unfamiliar with how they are used.
Any help would be appreciated.
UPDATES & SOLUTION
I opted not to go the flexbox route as I was wanting something quick as a solution and flexbox can be something I look more into in the future.
After deciding that I wanted a static nav bar, of which was not occurring when first coded, I set upon using a CSS calculation to utilise height: 100vh and subtract the overhang that this caused.
mat-sidenav-container {
height: calc(100vg - 64px);
}
I found however, that when shrinking the size of the window, the responsive nature of the material elements meant that the toolbar would reduce in height somewhat. This led to a blank bar below the page content as the amount to subtract would need to be less in this situation.
The fix for this was to add an #media change for the specific page width the shrinking is triggered. I was then eventually left with the following:
mat-sidenav-container {
height: calc(100vh - 64px);
}
#media (max-width: 600px) {
mat-sidenav-container {
height: calc(100vh - 56px)
}
}
This may not be the best solution for the problem, but so far I have found this to be one solution that works.
Ok, here is what worked for me in with the code you gave me:
I added the style="height:100%" to the following classes:
html, blitz-app, to the secondary div and to the mat-sidebar-container
Edited: Changed the style of the html tag to: height:calc(100% - 64px);
Reason: the 64px is the height of the toolbar
I added it all in the chrome browser debugging console, because I couldn't find the actual classes the code is using, but I am sure you can :)
Hope I could help.
I'm doing the first project for The Odin Project, which is recreating the Google home page. I think mine looks pretty good considering I've only been at this for a few weeks, but when I take my page out of fullscreen mode, a scrollbar appears. If you look at the Google homepage, The page itself resizes instead of using a scrollbar. Overflow:hidden obviously will just cut off the bottom of the page, so I don't want that. I'm sorry if I'm not being specific enough, but here's a link to my Github to check it out.
And if you see anything that I'm doing completely wrong or messy, I'd really love some criticism.
I haven't had a look at your GitHub, but I would suggest incorporating bootstrap, which basically lets you develop pages responsive to the screen size.
You might find this tutorial helpful:
https://www.w3schools.com/bootstrap/
After a quick look through your Github, you are setting a min-width: 500px to your all class which contans all your content. Try setting your all class width: 100% instead. This will allow your content to fill the page and adjust as the screen size adjusts.
Granted, once you get really small and content hits each-other they will break to other lines, but you would have to handle that with a media-query to adjust the size/scaling etc...
.all {
margin-left: auto;
margin-right: auto;
width: 100%;
}
Actually, all I had to do was remove all your .all styles to fix this issue. I also fixed your footer so it sticks to the bottom of the page. Finally, if you want to make the input size well, use media queries like so:
#media (max-width: 500px /* or whatever */) {
input {
width: 80%;
}
}
This will set the input's width to 80% at screen sizes 500px and smaller. Hre's a pen of what I changed: https://codepen.io/Hudson_Taylor11/pen/pemaoK?editors=0100
Hi I'm trying to create a Responsive Email Template.
I can't make the background images responsive.
Here is a sample of the images code:
a#learn-more { background-size: 100%; display: block; background: url('http://tophitechgadgets.com/wp-content/uploads/2013/11/learn-more.png')no-repeat; height: 68px; width: 600px; margin: 0 auto; }
Basically We have the following images that I am having a hard time making fluid (responsive)
-logo (a#learn-more)
-banner image (.banner-img)
-learn more button (a#learn-more)
-image1 and image2
I have my demo here: http://jsfiddle.net/nLxjU/3/
Hope you can edit the code to see what my issue why I cant make them responsive.
I'm really stuck here.
You can use a different div with absolute positioning, and containing the image inside it with percentile width and height, so when the screen size changes, the div (and the image inside it) resizes, too. Just place the div below everything with z-index and you're done.
Email-clients, like Outlook (-Express), Mail (OSX) etc, all use different html-engines, and have a lot of restrictions. Especially Outlook seems to be using a limited IE6 based rendering engine. Background images and styling by css classes don't work, and forget about absolute or relative positioning.
Make sure the template also looks good in these email-clients, unless you only aim at mobile email clients (they seem to support all of this).
Take a look at the standards guide (html/css) at http://www.emailology.org/.
You can improve with the following, but as #Willem says you really need to change your approach if making an email template. Many email clients completely remove the head and strip out styles. Some support a limited set of inline styles for formatting and none for layout. In fact an old-school table layout with inline styles is generally the best way to go.
You might find some of this useful: http://www.campaignmonitor.com/guides/mobile/
As for making the best of what you've got so far:
Your .divider and .banner-img elements were set to 600px wide.
Set them as 100%.
Don't have the banner as a background image.
Size your .lpanel and .rpanel images as 100% of the parent's
width.
Demo: http://jsfiddle.net/nLxjU/