Getting what appears to be rogue margin off of a google map element. The gallery should be on the right but this margin is stopping that. Can't seem to find what's producing this margin. Even the element inspector 'Metrics'? tool shows there is no margin, but the element highlighting on the screen shows a margin that pushes to the right edge of the page
My CSS for the element.
.gallery-map {
height: 320px;
}
#media (min-width: 415px) {
.gallery-map {
height: 416px;
}
}
#media (min-width: 780px) {
.gallery-map {
height: 500px;
width: 500px;
}
}
Explicitly set margin and margin-right to 0, tried to contain it in a wrapping div (that removed the rogue margin from the map element and put it on the new wrapping element) and several other things.
A link to the branch I'm working on for this
The fix was setting a couple of inline-blocks
.gallery-map {
height: 320px;
display: inline-block;
#media (min-width: 415px) {
height: 416px;
}
#media (min-width: 780px) {
height: 500px;
width: 64.5%;
}
}
Also to get that gallery to come along side I needed to add the inline-block specifically to the media query
.gallery {
height: 318px;
overflow-y: scroll;
overflow-x: hidden;
#media (min-width: 780px) {
width: 35%;
display: inline-block;
}
}
Related
.container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
/* Small */
#media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium */
#media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
I tend to use containers everywhere To middle content in different devices and keep it balanced (media) like min-width 1200px {width: 1200px}etc. However when I try to style a site that begins from the edges. it comes in the middle which does not help in these kinds of sites.
what should I do?
If you are going to say get rid of containers, I do not know how to work without them Can you tell me what to do instead of the containers that I tend to use?
When the page is displayed on PC or tablet width it works perfectly. When on phone the body leaves empty space on the right. It isn't margin, or padding. I have tried width: 100% and width: 100vw.
Although the #media part doesn't help too much. I'm using flexbox to position everything, the viewport is activated and I have tried using position absolute / fixed on the body, but nothing works.
#media (max-width: 576px) {
body {
width: 100%;
}
main {
width: 100%;
}
header {
justify-content: center;
flex-wrap: wrap;
padding: 1rem;
}
nav {
margin-right: 0px;
}
a {
margin: 0.5rem;
}
}
How do I setup HTML/CSS to have my DIV follow the screen size for width, but stop expanding once it fits the contents (it should scroll left/right when the div cannot fully contain the contents).
Pseudo-Code:
HTML:
<div class="image-container">
<img width="1000">
</div>
CSS:
.image-container {
/* ??? */
display: inline-block; /* ??? */
overflow: auto;
}
EDIT: Per Evadore's answer, I was able to come up with the following CSS.
.image-container {
display: inline-block;
overflow: auto;
}
/* optimize these px dimensions, 900 worked for my application */
#media (max-width: 900px) {
.image-container {
max-width: 710px;
}
}
/* redundant, I plan to tweak this range later */
#media (min-width: 901px) and (max-width: 1575px) {
.image-container {
max-width: 710px;
}
}
#media (min-width: 1576px) {
.image-container {
max-width: 1385px;
}
}
The following reference also helped: w3schools
Use CSS Media queries to setup for various screen sizes.
view source code of this page to see how media queries were used.
for this set the parent div width to fit-content and max-width to 100%. now the parent div will remain between the width of the content and the with of the screen if the screen size is not enough. And lastly for scrolling inside the parent div on the small screen devices put overflow:scroll.
Here is the Codepen demo
.parent {
background-color: green;
width: fit-content;
max-width: 100%;
overflow: scroll;
}
.child {
padding: 30px;
width: 700px;
background-color: red;
color: #fff;
}
<div class="parent">
<div class="child">
test string
</div>
</div>
ps: I've added bg colors just for reference purposes, to show whether the parent component is expanding or not.
I am using the CSS #media property to hide a div when the page is 900px or less in width. It works the first because when I resize the page to less than 901px the div disappears, but when I return the page to its normal size, the div remains hidden. Here is the code:
<style>
.mydiv {
display:block
}
#media (max-width: 900px) {
.mydiv {
display: none;
}
}
</style>
What do I have to do to make the div reappear after the size returns to normal?
Try:
<style>
.mydiv {
display: block;
}
#media (max-width: 900px) {
.mydiv {
display: none;
}
}
</style>
Maybe you have a style interfering somewhere, you may want to look at the inspector to see which styles are being applied.
(open the snippet in expanded mode to test it)
.hide-me {
width: 200px;
height: 50px;
background: green; /* visible */
}
/* This has to come last */
#media only screen and (max-width: 900px) {
.hide-me {
background: red; /* hidden */
}
}
<div class="hide-me"></div>
I actually fixed it by using visibility: hidden instead of using display: none. I don't know if this is a consistent fix, but it worked for me
I am trying to make the overflow of an image appear to be hidden upon a certain screen size, but I cannot find the solution of why this extra spacing appears. Here is the html an css I have so far. I am trying to do this because the image would appear too small.
Bootstrap solutions are also welcome too.
.aboutsplash img{
width: 100%;
height: auto;
margin: 0;
}
#media (max-width: 769px){
.aboutsplash img{
overflow: hidden;
width: auto;
max-height: 150px;
}
}
#media (max-width: 500px){
.aboutsplash img{
position: left;
margin: 0 0 0 -25%;
}
}
<div class="aboutsplash">
<img src="images\sunsetcrop2.jpg" alt="lbl sunset">
</div>
#media (max-width: 769px){
.aboutsplash {
overflow: hidden;
}
}
try this.