I am having trouble getting my HTML 5 canvas to stop overlapping my body content when I scale to varying browser sizes. I am new to front end development so any help would be greatly appreciated. Site is: http://www.alanhurt.com
Thanks!
Try adding a width and height to the canvas#triangle-lost-in-space target.
So in your CSS add these lines:
canvas#triangle-lost-in-space {
width : 100%;
height : 850px;
}
This will work until your first media break point at 767px. To fix it after the breakpoint add:
#media (max-width: 767px) {
canvas#triangle-lost-in-space {
height : 600px;
}
}
This was done via the chrome inspector - so just make sure when implementing to have those changes at the bottom of your stylesheet so they will be applied and not overwritten.
Related
Codepen - https://codepen.io/spaOyst_/pen/bGWagKG
I am attempting to rebuild a site by going mobile-first but I am struggling with what I think is the responsiveness/resizing of the images or the other sections not resizing when browser width is increased, but the images grow quite large and overlap the section below.
I have tried adjusting the width and height of the images, anchor tags and the section below the images
If anybody has any ideas of what the cause would be, I would really appreciate the help.
At line 246 of your CSS, you've set the height of the lightbox section to 700px and this non-responsive height is causing problems at viewport widths of about 490 - 760px.
It isn't clear to me why you even need to see the height of this lightbox section, but if it's necessary, what about adding an extra breakpoint?
#media (max-width: 490px) {
.lightbox-section {
height: 700px;
}
}
#media (max-width: 760px) {
...
.lightbox-section {
padding: 63px 10px;
/* height: 700px; */ Either comment this out or adjust as needed
text-align: center;
}
...
}
https://codepen.io/panchroma/pen/QWvaMEd
I can see that you've set a pixel height for the index-services section as well but the image links are broken so I can't see if there's an issue in this section as well or not.
My HTML website currently has a large empty space on the right side on mobile. The website is pumpkinchugger.github.io/rona20.live how can I get rid of this empty space? I currently have this in my CSS file, and I think it is causing this problem?
#media all and (max-width:991px){
.row{
flex-direction:column;
}
.container--wrap{
width: 98vw!important;
}
}
Is the max width the problem?
There is an overflow happens on the tradingView widget which set a fixed width of 500px. If you want a more proper fix for The widget is not adapting to different screen sizes. What should I do?, please refer to Market Overview Widget FAQ.
For now, I recommend fixing the issue with the following CSS code by setting the maximum width of the widget chart to 100%.
#media screen and (max-width: 576px) {
div.tradingview-widget-container__widget,
div.tradingview-widget-container__widget > div:first-child,
div.tradingview-widget-container__widget > div:first-child > iframe {
max-width: 100%;
}
}
I don't think max-width is the problem here. Upon inspecting the page, i removed the mentioned CSS, it did not change much and also, the spacing wasn't removed. When the width was set to 145% from 100%, it semeed to fit the page correctly
i am trying to build a site with basic css "parallax" effect where the image has a background-attachment:fixed and stays there when you scroll. the code background-size:cover works great in large browsers, but i am noticing when i make screen smaller, sizes 800px or 900px, the images in the div are getting cut off and i only see a little of the image. i've played with changing background-attachment to be background-attachment:contain - when i do that the image shows perfectly in the div but i see a huge space under the image.
http://greendental.mediaworksonline.com/
i've been wracking my brain on this for 2 days. if you could help that would be greatly appreciated. i'm building this to just use css and not jquery.
A fast solution can be put differents resolutions, an example
#media screen and (max-width: 900px) {
.imgblock {
min-height:400px;
}
}
#media screen and (max-width: 400px) {
.imgblock {
min-height:200px;
}
}
Hope this can help you
maybe my title did not make much sense. So first off I want to apologize for that and I'll do my best to explain what I mean.
I am trying to create a website layout with percentages. When the browser gets bigger everything looks quite nice. When making the browser smaller that's when things get really messy e.g. the menu bar gets pushed out of it's position and gets over the content area.
So what I would like is that after a certain point(before things get pushed out of there position) the width gets threaded like it was pixels and the browser has to be scrolled to see the content.
Hope you have an idea of what I meant and I would like to thank you guys in advance for any help!
Take a look at media queries:
#media (max-width: 600px) {
/* your code for small devices */
}
#menu-bar {
width: 100%;
min-width: 1000px; /* Your desired width */
}
But I suggest you to use it for the whole content page or wrapper div.
.wrapper {
width: 100%;
min-width: 1000px; /* Your desired width */
}
And then put other contents inside it using percentage width.
I'm testing out my CSS at http://flexibletheme.tumblr.com/ and trying to make the website responsive to a small screen size.
Only problem is, I can't get the padding to work on aside element. To reproduce the problem resize your browser window till the sidebar stops floating to the right (this will appear at the bottom, once the screen size is below width of 600px.
All the CSS is inline for now, to view the css. Part relevant to the resizing starts at:
#media screen and (max-width: 600px) {
Edit: This image shows the padding in purple (via Firebug) not displaying properly:
What about the padding isn’t working? Chrome’s web inspector seems to confirm that the padding is there as declared.
I do notice that your <aside> element ends up positioned outside the left edge of your layout, but that’s because it’s floated right and has width: 100%; assigned to it.
from reading your code in Chrome's Inspector, I can see that the following rule is applied when you minimize the screen
#media screen and (max-width: 600px) {
#content {
width: 100%;
}
aside, #title, #menu, .photo img, .asker {
width: 100%;
}
}
This is why you are having the problem. Find your media query in your CSS and sort it out there. :)