I have a div box with an absolute position fixed to the left side of a page. It looks great on PC's and is doing its job of being unobtrusive to the user. However, when the page is loaded from a mobile device, the left side of the screen is no longer way off to the side, it is on the edge of the content so this absolute box now covers a little bit of the content on the left. My goal is to only show this one specific div box to PC's, while preventing it from loading on mobile devices.
CSS:
.harry {
float: left;
padding: 5px 0 0 0;
margin: 0;
position: absolute;
left: 0px;
top: 100px;
z-index: 999999;
}
HTML
<div class="harry">
<big><p><img src="images/side-harry.png" height=200 /> </p></big>
</div>
One way is to just set a CSS3 media query, and hide that div when a mobile device is detected:
#media screen and (max-device-width: 480px) {
.harry {
display: none;
}
}
Related
I'm having a problem with the mobile version of a responsive website I'm building.
See that green "info" DIV that appears at the top left corner of the full-screen version of the site?
I need it to move down and live at the bottom of the screen - right above the footer DIV that has all the links - on the mobile version of the site.
Here's the full-screen version:
Here's the Mobile version:
Here's my CSS for the regular full-screen layout:
#productHoverDIV {
z-index: 20;
position: absolute;
top: 10px;
left: 10px;
width: 300px;
padding: 8px;
}
And here's the mobile rule:
#media screen and (max-width: 414px) {
#productHoverDIV {
z-index: 20;
position: absolute;
bottom: 40px; // that's the height of the FOOTER DIV below it
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
The issue is that even though I'm telling the productHoverDIV to be 40px from the bottom on the mobile layout, it still keeps it's top:10px value from the regular CSS rule, and ends up covering almost the entire screen.
So I need to somehow cancel-out the top rule - or override it with a different value, except
I have no idea know what value to put from the top cause every mobile device has a different height.
How do I resolve this?
You should change it back to its default value, which is auto.
Removed the duplicated z-index and position values.
#media screen and (max-width: 414px) {
#productHoverDIV {
top: auto;
bottom: 40px;
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
I am super new to Bootstrap so please forgive me if I am just not getting it.
This is more of a design decision question than a technical question but I noticed in the bootstrap dashboard examples Bootstrap 4 dashboard example on a small device there is no way to navigate through the application as the left menu completely collapses and there is no + to expand the navbar. On the 3.3 version here: Bootstrap 3.3 dashboard example when the device is very small there is at least a + that allows you to expand the top navbar but still all of the options on the vertical menu on the left are completely lost.
Without the menu on the left it seems to me that the application would be unusable. Am I missing something?
Default sidebar display in Bootstrap example is hidden display: none;
And for screen width > 768 px #media (min-width: 768px) {} they show this block.
You can do it yourself..
Here is original Bootstrap code:
/* Hide for mobile, show later */
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
This seems to be a pretty standard situation but the HTML/CSS is behaving oddly. I'm in the process of building a profile page for a game and am also looking at mobile responsiveness. I can't seem to get the right-margin to go away. It's not a problem in portrait mode (using a Chrome mobile emulator extension) but in landscape, the div + margin is too wide and a scrollbar appears.
HTML:
<div class="userProfile" style="display:none">
<div class="profileTop">
<div class="profilePicture">
<img src="somepicture.png"></img>
</div>
<div class="profileName"></div>
</div>
</div>
CSS:
.profileTop {
position: relative;
top: 10%;
left: 15%;
width: 70%;
height: 12%;
margin: 0;
}
.profilePicture {
display: inline-block;
width: 12vw;
}
.profilePicture img {
width: 100%;
height: auto;
vertical-align: top;
}
.profileName {
display: inline-block;
position: relative;
font-family:Stencil;
font-size: 1.3em ;
font-weight: lighter;
color: white;
left: 20%;
top: 35%;
}
What's odd is that if I decrease the width of the "profileTop" class, the right margin grows so that the whole thing is the same width. Any help?
EDIT: I can get a workable solution by reducing the width of "userProfile" but it's still bothering me that this won't work as originally intended.
EDITx2: The margin also exists on the "userProfile" div. I suppose the "profileTop" div is following its parent somehow but even if I add margin-right: 0 attributes to both divs, the margin is still there. The parent of "userProfile" is the body.
Error in HTML code, you don't need a closing tag for image.
Secondly, you can use media queries to achieve that. Media queries even have an option for landscape and it's really easy to use. Good luck
#media (min-width: 700px) and (orientation: landscape) { ... }
P.S. Use codepen or jsFiddle second time, it will be WAY MORE simpler to help you.
EDIT: Added media queries example
You need to use a more specific selector to override the initially-assigned CSS attribute.
#media (max-width: 768px) {
div.userProfile div.profileTop {
margin-right:0;
}
}
i am creating a responsive web design containing images....i want to know if there is any way i can crop images when they overlap i.e if i have two images in one line image 1 and image 2
image 1 is at the left and image 2 is at right and i start lessening width of my browser, and when image 2 reaches image 1, image 2 starts cropping or hiding or whatever....how m i going to do that?
here is my code for what i am trying:
#logo{
float:right;
margin:88px 0 0 70px;
position:absolute;
}
#header-add{
float:right;
margin:35px -10% 0 0;
cursor:pointer;
}
Logo is image 1 and header-add is image 2
Rather than crop the image, I'd suggest simply setting your CSS to set the width of the images appropriately when the browser width is decreased. This way you don't have to worry about cropping.
For example (values arbitrary, but percentage-based, which I find best for responsive design):
#media screen and (max-width: 768px) {
#header-add {
width: 40%;
}
}
#media screen and (max-width: 480px) {
#header-add {
width: 25%;
}
}
If you don't want to set the width of the images via CSS, you can essentially "crop" the images if you enclose each of them in a div and you can set overflow:hidden on the div, and then set the width of the div in the CSS (like the aforementioned image width example).
Hope it helps!
Addition:
In answer to your comment about cropping from the left, here's how I would recommend doing it. The downside is that you have to add an explicit height on the div that crops the image, but it should work for you.
The HTML:
<div id="crop_div">
<img src="foo.jpg" alt="bar" />
</div>
The CSS:
#crop_div {
float: right;
height: 100px; /* Needed since contents use absolute position */
overflow: hidden; /* To crop the img inside of it */
position: relative; /* Set for img position below */
width: 400px;
}
#crop_div img {
position: absolute; /* To anchor it on the right */
right: 0;
}
#media screen and (max-width: 768px) {
#crop_div {
width: 40%;
}
}
clip() and overflow: hidden for masking for sure your content.
min-width and/or max-width to manage the width of each div when the sum of both would be too large for the width of the container.
I have a really bizarre issue that I just recently noticed
I'm working on a wordpress theme for a friend, and I'm using relative/absolute positions to add social/connect buttons on the side of some divs -- Which works fine to get the proper design.
The issue, however, arises on the "Social" div that is on the right side of the page.
If the browser is smaller than the main content's size, it adds extra white-space to the right side of page. If I move the div to the left side, it's fine; it only adds the whitespace at about half the page length (which is more confusing).
I can't for the life of me figure out why this is happening; I can't figure out if it's a standard behavior, or an issue I created on my own.
I was hoping perhaps someone here might have had similar experiences, or just an idea how to fix it.
The CSS for the #social div is:
#social{
width: 90px; height: 250px;
padding: 10px;
position: absolute; right: -40px; top: 40px;
background: #EFEFEF;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);}
The CSS for the #page-content div it resides in is:
#page-content{
clear: both;
min-height: 500px;
width: 870px;
margin: 0 auto;
padding: 20px 0;
position: relative;
border: 5px solid #FFF;
background: #F2F0D7;}
And the screenshot is:
The width up there only exists if the browser's width is less than 960px (the width of the content)
After viewing your site, it looks like it's your social pannel. Some of the generated elements are 100px or more wide. If you remove the width:90px;, you can see the width it's trying to achieve. You could wither amend those elements and set their widths smaller (or to 100% or whatnot), or you could apply overflow: hidden; to the #social div:
#social {
...
overflow:hidden;
}
The reason why this is occurring is because you have overflow out of your social container. It only happens on the right because those elements are left aligned. (you could also align the elements to the right I suppose.)
Hopefully that helps.
As far as I have understood - You want your template to be responsive . For that you need to write media queries to cater various media sizes and resolutions .
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
write css styling for the different sizes and you can make you website look the way you want .