I wan't to hide nav and made img slightly smaller when screen gets smaller then 750px.
Example Code
This doesn't work:
#media (max-width: 750px)
header#site-header
a.logo
img
margin: 15px
height: 25px
nav
display: none
And this does:
#media (max-width: 750px)
header#site-header
.container
a.logo
img
margin: 15px
height: 25px
nav
display: none
The stylesheet before the media queries is overwriting those styles.
By specifying a direct path to the element it gets a higher priority and then it will work. Or you can just place !important to give it a higher priority.
Related
I make a responsive web page where at max width of 768px (via media query) the div inside the main container suppose to change to inline-block so that the page would scroll horizontally to the div's id when user click on link. The page is set up with overflow: hidden, so it navigate using id/anchor alone.
The problem is, when I did a preview in mobile, the container just spread out and I can totally swipe the page. Even the menu button that suppose to be in the center of the view port went to the center of the container. And leaving a huge white space below it. It did good however in desktop browser. So I presume it has everything to do with the nowrap function.
It worked in Firefox both mobile and desktop. It worked in I.E desktop. It did not worked in Chrome mobile but seems to be working in desktop. And failed in Safari mobile, haven't tested yet in desktop.
I tried to remove white-space: nowrap function only to find out the div did not stacks inline-block like it suppose to. I tried specified container's width and min-width with no luck. I tried float: left, position values and a bunch of things i don't recall them all. Nothing's change.
HTML
<div id="container">
<div id="company" class="company">
<iframe src="main.html">
</iframe>
</div>
<div id="content" class="content">
<iframe src="content.html">
</iframe>
</div>
<div id="system" class="system">
<iframe src="system.html">
</iframe>
</div>
</div>
css
body{
overflow: hidden;
}
#container {
height: 100vh !important;
min-height: 100vh !important;
}
#container .company, #container .content, #container .system {
display: block;
height: 100vh !important;
min-height: 100vh !important;
}
#media screen and (max-width:768px) {
#container {
display: block;
white-space: nowrap;
}
#container .company, #container .content, #container .system {
display: inline-block;
}
}
iframe {
width: 100vw !important;
min-width: 100vw !important;
height: 100vh !important;
min-height: 100vh !important;
border: none;
}
What I expected (Chrome desktop)
https://kamalmasrun.files.wordpress.com/2019/01/desktop.jpg
But only comes to this in mobile
https://kamalmasrun.files.wordpress.com/2019/01/screenshot_20190122-120510.png
Your help is much appreciated and I first address a thank you to all for the help =).
Basically, you have a few problems here:
Setting overflow: hidden won't prevent browser on mobile from scrolling (on Firefox it might, but on Chrome or iOS Safari it will not). Blocking scrolling is a hard thing to do on mobile to be honest, and it always is a little bit hacky, so I would not go that way.
To achieve scrolling (or jumping) using links with #content etc, body has to be expanded and browser has to see where this element is. Expanding body will result in ability for user to scroll left/right, which is hard to block as I mentioned before. You have to scroll #container to show new element. You can do this using javascript.
Also, don't forget to add overflow: hidden to #container (this will work on mobile).
If something is still unclear, feel free to ask in comments below this answer :)
The idea of algorithm to achieve your goal:
Listen to hashchange event
Read current hash from window.location
Find element with given hash using document.querySelector
Read element's position inside container
Set scrollLeft property of container to be equal element's position
Some useful links to get you started:
https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange
https://developer.mozilla.org/en-US/docs/Web/API/Window/location
https://developer.mozilla.org/pl/docs/Web/API/Document/querySelector
https://developer.mozilla.org/pl/docs/Web/API/Element/getBoundingClientRect
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
And updated CSS:
body {
overflow: hidden;
margin: 0;
}
#button {
position: fixed;
vertical-align: center;
}
#button .btn1,
.btn2,
.btn3 {
padding: 10px;
display: inline-block;
}
#container .company,
.content,
.system {
display: block;
height: 100vh;
min-height: 100vh;
width: 100vw;
}
#media screen and (max-width:768px) {
#container {
display: flex;
flex-flow: row nowrap;
}
#container .company,
.content,
.system {
display: block;
}
}
iframe {
border: none;
height: 100vh;
min-height: 100vh;
width: 100vw;
}
It's possible that setting min/max width to #container will do the trick.
#container {
min-width: 100vw;
max-width: 100vw;
}
Also, I'd suggest using flex here, as it would suit well and is more modern.
I have two images placed on top of each other in a div with a caption underneath. I would like all of these elements to scale proportionally and together as the browser window shrinks.
Currently, the position of the two images shifts and does not look the same on mobile.
.highlightimg {
max-width: 700px;
height: auto;
width: 100%;
display: block;
position: relative;
z-index: 1;
padding-top: 10vh;
margin-right: 0;
}
.showcase {
max-width: 750px;
margin:auto;
position: relative;
margin-top: 8vh;
margin-bottom: 8vh;
}
.logo {
left:0;
max-width: 400px;
width: 100%;
height: auto;
position: absolute;
z-index: 3;
left: 0px;
}
.caption {
margin-top: 10px;
margin-bottom: 0;
padding: 0;
text-align: right;
}
<div class="showcase">
<img src="logo.png" class="logo">
<img src="highlight.jpg" class="highlightimg">
<p class="caption">Caption text here.</p>
</div>
The best analogy for the product I'm trying to receive is grouping multiple layers in Photoshop which allows you to scale all the layers together as if it was one single image. I am new to HTML/CSS, so I hope this makes sense and is not asked too often. Thanks for your help.
The position of the logo relative to the image under it will definitely shift. One of the reason for this is that you use vh unit for some properties, including the padding-top of the .highlightimg. 10vh in desktop and in mobile is different (they both have different viewport sizes). If you want both elements to stay the same, anchor both of them to the left and top by setting at least constant padding-top, margin-top, or the top properties (including the left padding and margin).
Maybe adding top: 18vh; to .logo could help. Using top: 10vh; instead of 18vh while also removing margin-top: 8vh from .showcase could also help. This is to ensure the top offset of the .highlightimg provided by its padding-top property scales proportionally with the top offset of the .logo. These solutions assume that there are no other elements in the page that will surely alter the location of these elements especially the ones without absolute position.
position: absolute; anchors your element to the screen. While position: relative; keep the element original rendered position and move the element itself relative to its original rendered position. Both have radically different impacts on where your elements get rendered on the screen. If you want both element to be exactly at the same location, use absolute for both and use same top and left properties.
Point is, don't rely on CSS properties to determine the exact location of your objects. If you want behavior like the one you describe in your Photoshop analogy you could find a way by using canvas.
I have a problem with a CSS grid I built. The relevant site is this: http://dr-brauchle.de/
The wall of photos underneath the content is constructed with a grid of floated boxes. This works fine as long as all the boxes have fixed width and height values.
To make the site responsive I use percentages on the width of the boxes and "auto" on their height and the same applies to the images that are loaded into these boxes. The media query jumps in at 1199px and converts the static box sizes to fluid box sizes.
This produces problems at certain resolutions where the second large image box jumps from the left margin of the page to the right and thus destroys the order of the grid. Making the browser window bigger makes the box jump in to place again. This is very annoying since the resolution on an iPad 3 for example produces this error as well.
On the boxes (sse code below) I had to use a "line-height: 0" to eliminate gaps of a few pixel between the boxes. This seems to be part of the strange float-problem.
.box-1 {
width: 25% !important;
height: auto;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
}
.box-2 {
width: 50% !important;
height: auto;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
}
Thanks a lot for ANY help!
Arne
So what I found is that you need to force an aspect ratio.
Try modifying the following styles:
.box-1 {
width: 25% !important;
height: 0;
display: block;
overflow: hidden;
float: left;
background-size: cover !important;
line-height: 0;
position: relative;
padding: 13.75% 0 0 0;
}
.box-1 img {
width: 100% !important;
height: auto !important;
position: absolute;
display: block;
max-width: 100%;
max-height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
Basically the modification above set up the box-1 to have a fixed aspect ratio then positionsw the img in in absolutely. To calculate the 13.75%, I took one of your images and got 165/300=.55 --> .55*.25=.1375 --> 13.75%
Hope this solves your issue.
Reference
Edited; see bottom of post
I have a layout that works perfectly in everything except Internet Explorer 7.
I have a container div that has a width and hasLayout (I've tried zoom and various other things that ought to set this, but nothing changes). Inside are three floated elements, one left and two right. Below them is an element that is clear: both and it actually is doing that, but the container is ending at the shorter float even when I set a height for it including a height taller than the originally/naturally taller one.
Here's what it looks like: http://tinypic.com/r/ea3vpy/8
It should look exactly like that, except with the two elements that are awkwardly not in the layout inside the content area.
I've tried adding empty divs with clear: both, I've tried clearfixes, I've tried floating the container. I even added a container around the two right floating divs and floated that instead of them, but it didn't change anything. Overflow is not really an option because then I have to either cut off the content or have scroll bars inside the layout.
Here's the relevant CSS:
#content {
width: 669px;
height: 100%;
padding: 20px;
padding-top: 0;
position: relative;
display: table-cell;
vertical-align: top;
background-color: #F7F8F7;
text-align: left;
}
#content { /* To make it play nice with the sidebar */
_width: 709px;
*display: inline;
*position: absolute;
*left: 0;
*zoom: 1;
}
p#indexwelcome {
max-width: 330px;
min-height: 440px;
float: left;
}
#dogimg {
width: 323px;
max-width: 100%;
height: 246px;
margin-left: 10px;
float: right;
}
#loginbox {
max-width: 323px;
margin: 20px 0;
padding: 10px;
position: relative;
float: right;
}
#itemsbox { /* the one with the bananas */
width: 644px;
height: 142px;
margin-top: 20px;
position: relative;
clear: both;
}
And the HTML:
<div id="content">
<h1>Heading</h1>
<p id="indexwelcome">Text paragraphs here</p>
<img src="images/dog.jpg" id="dogimg" alt="dog" />
<div id="loginbox">
<p>Login box stuff</p>
</div> <!-- loginbox div -->
<div id="itemsbox">
<!-- banana images here -->
</div> <!-- itemsbox div -->
</div> <!-- content div -->
EDIT: So I fixed the issue although it's not quite ideal. Setting the content and sidebar to height: auto (as opposed to height: 100%) made them expand for their content.
However that page container (the green space) still won't expand even with height: auto. I have to set a specific min-height or height, which isn't great because the page content is dynamic, so other pages have extra space if their content is shorter than what it's set for and it'll be the same original problem if the content is larger. And then of course the content and sidebar boxes still aren't the same length (but that's a whole other issue).
Here's the page CSS:
#page {
width: 1025px;
height: 100%;
min-height: 650px;
margin: 15px auto;
padding: 10px 0;
position: relative;
background-color: #7B9F73;
*min-height: 990px;
}
I am creating a full width grid of images that use media queries to change how many columns of images there are. You can see a working demo here: http://vitaminjdesign.com/grid/
Using img{max-width: 100%} the images stretch to the width of its container. This works great, and the demo is working. As you can see, there should be a 1px space between each image. I am using the border-box model so the space is created by using padding-right.
BUT, if you resize the window, you will notice that the 1px margin between images sometimes change, and appear to have these inconsistent amounts of white space between/below images.
Upon inspection of each image, the browser is rendering the images at slightly different sizes (1px difference, but no more). This creates these uneven lines. The question is, if every image is EXACTLY the same size, how are they being rendered at slightly different sizes (which is turn causes this layout problem)? If you inspect each image, you will notice that the sizes are sometimes different, and sometimes the same (depending on the screen width).
CSS Below:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#work{width:100%; clear:left;}
#work li{width:20%; height:auto; padding-right: 1px; padding-bottom: 1px; float:left; position: relative; transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;}
#work li a{display: block; position: relative; width: 100%; height: auto;}
#work li img{display: block; max-width: 100%; height: auto; }
I will not list the media queries here, but all they do is change the width of the list items.
Any thoughts as to why this is happening and how I can fix it?
The issue is on your media-queries and nth-child selectors. But I'm not really sure why setting border-right: none; is adding 1px of height for the grid. To solve the problem just delete the border-right: none; inside this selectors:
#work li:nth-child(3n+3) {
border-right: none; //Delete this
}
#work li:nth-child(2n+2) {
border-right: none; //Delete this
}
Removing the margin attribute on the * selector solves the problem for me.
* {
-moz-box-sizing: border-box;
font-weight: normal;
padding: 0;
}
The problem is because each list item has a calculated width. BEcause all of the columns EXCEPT the last column have a padding-right / border-right, they effectively have a different width, thereby making the image a different width/height. By removing the rule for zero padding/border on the last item of the column, all of the images have the exact same width and height.