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
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.
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.
I have an responsive html email design which I did using this tutorial from campaign monitor but I have one problem my image is not fitting to the device when it is viewed on mobile,after designing many templates and reading a lot on email designing blogs I learned that gmail by default remove css or styling in the head part and allows only inline html .So now in my case I want my image to fit the device width but its not fitting when I am sending in mail but I can see on browser because of below coded media query .
#media screen and (max-width: 480px) and (min-width:300px) {
.col185{max-width:100% !important;}
.col180{max-width: 100% !important;}
.col180 img{
height: 155px;
}
}
. So what is there any way where in i can see image stretched on my mobile device also. This is my js fiddle link .
Let's say that the name of the div that contains the image is pic You should do this
CSS
.pic img{
width:100%;
height:100%;
}
This will allow the image to re-size itself according to the parent div. If you still don't understand this method let me know and i'll expand on it
You need to change to width or min-width, and right now you have max-width. See below:
#media screen and (max-width: 480px) and (min-width:300px) {
.col185{min-width:100% !important;}
.col180{min-width: 100% !important;}
.col180 img{
height: auto;
}
}
Otherwise, you're just saying to use height: 155px and width will adjust to that height.
Also, remember that not all mail clients render your CSS the same. Many of them, specially Outlook, won't accept many of your CSS rules. Just to be sure, you can run your code through http://premailer.dialect.ca/ (free) or similar so you can pre-check what will happen with your mail
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. :)