logo
down
shadow

CSS - mobile responsive issue with absolute positioning


CSS - mobile responsive issue with absolute positioning

By : alexR
Date : November 20 2020, 11:01 PM
Does that help Add this meta tag to your document head:
code :


Share : facebook icon twitter icon
Responsive Layout & Absolute Positioning

Responsive Layout & Absolute Positioning


By : Kurt W
Date : March 29 2020, 07:55 AM
Hope that helps Whether absolute positioning is appropriate depends on whether the positioned element should affect positions of other elements (or to be affected by them). If not, absolute positioning is perfectly OK.
Absolute Positioning with percentages & responsive

Absolute Positioning with percentages & responsive


By : JProhaska3
Date : March 29 2020, 07:55 AM
I wish this help you I created this for sometime back. CODEPEN Check 1st div.
and this will work for any width and height, not just 50%
code :
.absolute-positioned-div{
    height:50%;
    width:50%;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translateY(-50%) translateX(-50%);
}
Trouble with responsive and absolute positioning

Trouble with responsive and absolute positioning


By : user3611445
Date : March 29 2020, 07:55 AM
help you fix your problem Try adding position: relative; to the parent of cover DOM. Also ensure the cover starts from top: 0, left: 0 and ends as bottom:0 and right:0.
You might have to do a clearfix for proper alignments for ensuring overlapping of successive DOMS don't happen. (for <850px resolution alone). Adding this for generic HTML might end up screwing your desktop resolution.
CSS responsive absolute positioning

CSS responsive absolute positioning


By : hsingtzu
Date : March 29 2020, 07:55 AM
Does that help I have a dropdown menu whose position should be depending on the height of the header. The height of the header varies by content, the font-size and the padding set by media queries in dependence of viewport height. , Set the top to 100%, outside of the media query
code :
body {
  background-color: white;
}

header {
    background-color: grey;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
}

@media(max-height: 500px) {
  header {
    padding: 0;
  }
}

nav {
  background-color: #CCC;
  position: absolute;
  top: 100%;
  width: 100%;
}

a {
  border-bottom: 1px solid white;
  display: block;
  padding: 0.75rem;
}
<header>
  <p>Example</p>
  <nav>
    <a>Link</a>
    <a>Link</a>
    <a>Link</a>
  </nav>
</header>
how to make absolute positioning in web based responsive layout work on mobile too?

how to make absolute positioning in web based responsive layout work on mobile too?


By : troubledperson
Date : March 29 2020, 07:55 AM
this will help I'm having issues with a div which when positioned in absolute and top: 12%; works fine with default media queries in web responsive layout(When I shrink the window). but when I go to iphone mobile simulator view in dev tool, There is lot of gap between the elements. How can I resolve this? , This is the answer: Use paddinginstead of absolute positions.
Related Posts Related Posts :
  • HTML Video autoplay not working with bxSlider on Chrome
  • Why is the W3 Validator stating that there is a closing </p> with no opening one?
  • Set collapsing priority without applying flex to CSS items?
  • Image 100% height of container - min-height behaves differently on Chrome/Safari
  • Unable to send canvas div to front
  • IE creates unnecessary offset on menu subitems
  • External media query for CSS not working in Chrome
  • Bootstrap align an item to left of a button
  • dynamic updating of HTML5 canvas
  • CSS: Deleting and ignoring respectively all previous properties?
  • h1, h2, h3 around Microdata markup
  • Angular 2 Checkbox Two Way Data Binding
  • Image to Fit Containing Div
  • Fixed width for table first column
  • How can I alter the formatting of pandoc footnote marks?
  • push is not a function Angularjs error
  • Angular2 Call method in Template
  • Stop playing video in iframe when modal is closed
  • Bootstrap. Can't change navbar link color. Even with ID
  • Making a position:absolute div stay in place on page resize
  • Can we reference contents of <defs> across multiple <svg> elements?
  • Kendo Chart Databinding - Local Json Data with schema
  • Box shadow appearing from right to left
  • BEM element nest naming and sass rule
  • How to vertically center text next to image?
  • Responsive full width input with button
  • Make three headings in line. One to be on the left, second on center and third on the right?
  • XPath for all child elements before a certain sibling?
  • How to prevent default Css scroll onclick and allow javascript event only?
  • CSS Media Query not accounting for screen density?
  • How to stop second navbar from overlapping fixed navbar at the top of the page
  • List Indentation same x-cord as header
  • Sending file input doesn't work
  • Scale div padding according to screen width
  • Flexbox doesn't work in summary tag
  • Align image slider at the same bottom using css (Slick Carousel library)
  • Input border CSS
  • Define a custom <a> tag in CSS?
  • How to write vertical text from bottom to top without using transform rotate?
  • Text sometimes warping, sometimes not
  • CSS Correctly positioning pseudo element
  • Center Cropping Image
  • How to wrap a block around a div tag?
  • How to make a tight cell around text and expand empty ones?
  • make exact padding on text
  • position:relative started working different than at first (asp.net)
  • Html does not display in 1/2 columns
  • Positioning shapes to website
  • overwrite another tag in CSS
  • How to calculate sum on change?
  • Why do the browsers automatically wrap text of a web page without any indication about how to do it?
  • Sizing and positioning a border property
  • How do I float div's to the bottom of a page?
  • Responsive html with absolute position text inside relative positon picture
  • Flexbox doesn't work in IE 10
  • AngularJS shopping cart app: Disable button when quantity < 2
  • How to select element by order ? - Css
  • How to apply animation on the list items such that during an instance of time only one list item is visible?
  • responsive CSS - display:inline UL breaking into 2 lines, seems to have enough space
  • Reduce space between responsive div or classes html/css3
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com