So I'm kind of a newbie when it comes to coding, and I've been trying all day to position my elementor-post__badge element on top of a header text. The catch is that I want this positioning to be relative to the header so the position will be the same across all mobile devices. How can I do that? I tried the following code but it didn't work and the position of the badge element is different from one device to another:
#media only screen and (max-width: 767.98px) {
#parent {
position: relative;
}
.elementor-post__badge {
position: absolute;
top: 178px !important;
left: -14px;
font-size: 12px !important;
}
}
This is what I'm trying to achieve with the "News" badge on top of the header, but it doesn't work on all devices
Try using other units of measurement, meant for percentages of page width and height such as, vw,vh, and em, instead of px. The change in viewer width/height is what causes inconsistencies in alignment for certain elements across browsers and devices.
https://www.w3.org/Style/Examples/007/units.en.html
Related
When i make full size laptop z-index is 1 for the portion below image and i make media query for max-width of 1020px which is for mobile size and i make the following code to remove z index but it is still the same i cant make the image full size without z-index. Kindly help anyone to sort out this problem
CSS:
#media (max-width: 1020px) {
.title-row{
text-align: center;
}
.title-image{
position: static;
transform: rotate(0);
object-fit: contain;
z-index: 1;
}
}
I tried to object fit, z-index, and as much as i can but no use
i want the image and features section to be seen separate not features section overlay on image
z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
Regards,
I have few divs on my page, which serve as a containers. Here is a sample CSS code of one of the divs:
header {
background-color: #fff;
height: 153px;
width: 97%;
min-width: 1084.06px;
margin: 15px auto;
position: absolute;
left: 0;
right: 0;
border-radius: 20px;
}
This is a centered container for my header. There are several other containers which I have styled simillar way (absolute, centered and width in %).
Problem is, when I resize the window, all these containers hit the left side of the browser window. I want to save some margin on particular window width. How can I achieve that?
P.S. If I add margin-left it breaks my center position of the div
You can use media queries, media queries are only applied on specific conditions, such as a specific width.
For example the following background-color rule won't apply for screens wider than 480px:
#media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
For more info about media queries see this w3schools page
Add another margin-right
then straighten it out depending on what you use
i'm using this simple css, but elements move on screen re-size, and differentiate monitor resolutions.
.header {
position: fixed;
top: 15px;
left: 20px;
}
I think you are looking for the em unit instead of pixels.
.header {
position: fixed;
top: 15em;
left: 20em;
}
1 em is the height of the default font. It is defined by the browser.
Based on your comment to your question I would like to add that you maybe should have a look at the display:flex layout property or just on how to center the content of a(n) (div-)element.
In responce to your comment "'same place' means, on a widescreen its on middle of the page, on an old screen its on the right side."(I cannot comment)
I do not understand where you want it to be. If you want to make it appear to be the same distance from the left of the page when the page is re-sized, use left: some%;
I am truly stuck with this, basically I am using wordpress, and want a horizontal line to go across the page (breaking out of the inside container). This line should adjust to the screen size, so if you zoom out the line should keep getting longer, basically an infinate line.
So far the what i've managed to do is the following code:
.horizontalrule1 {
position:relative;
height:82px;
background: #f1f2f2;
overflow:hidden;
width:600%;
margin-left: -100%;
}
This technically looks fine but the issue is it's causing a scroller to appear at the bottom of the page because the width is set at 600%
If I set the width to 100% it doesnt make the line full width and stops it at the inside container which is about 990px.
All I want is an infinate line that will adjust itself to the screen size, so if you have a screen width of 1900px the line should be 1900px etc.
Hope this makes sense.
My html is:
<div class="horizontalrule1"></div>
To give everyone a better idea of what i want, check out onlywire.com, they have thick grey horizontal rules that stretch accross the site. This is exactly what I'm looking to do.
You want it to go OUTSIDE the DOM element?
.elementContainingYourHorizontalRule {
overflow: auto; /* or whatever, just don't set it to hidden. */
position: relative;
}
.horizontalrule1 {
position: absolute;
width: 600%;
left: 50%;
margin-left: -300%;
height: 2px; /* or whatever. */
}
I don't know if this is the best way to do things -- if I were you, I'd make your containing element go the full width of the page and let your custom HR do it's own thing automatically. I understand that may not work with your design/layout though.
At any rate, your horizontal rule will never be able to know your page width if you don't give the container the full width as well. So you're stuck with an ugly 600% hardcode until you get your container full-width.
Try this which should force it outside the surrounding container using negative horizontal margins:
hr {
margin: 20px -10000px;
}
And to avoid horizontal scrollbar add this to body:
body {
overflow-x: hidden;
}
If you only want to apply it to specific horizontal rulers, add it as a class.
HTML:
<hr class="full">
In Style Sheet:
hr.full {
margin: 20px -10000px;
}
You should set your body's padding and margin to 0 :
body{
padding: 0;
margin: 0;
}
I'm currently trying to optimize a Wordpress site for mobile devices, but I'm struggling with getting the footer of the site to cooperate. The site is here:
http://whitehallrow.com/
When loaded on mobile, the width of the body shrinks in accordance with the screen size and wraps all the contained text within it. However, the footer keeps its width, which I understand is because the width is hard-coded to look good on a computer screen. I've made a media query in the CSS that targets devices with screens 500 pixels wide or smaller, in order to get the footer to resize to the width of the body. Here is a snippet of my CSS that I've been tweaking:
#media screen and (max-width: 500px) {
#customfooter{
width:100%;
}
}
For whatever reason, this is not working - it still shows the footer as being much wider than the body. I've tried max-width:100%, width:auto; max-width:auto, and none of them work.
How do I achieve this without hard-coding anything?
Change your CSS from
#teakfooter {
width: 100%;
}
#verybottom {
width: 100%;
}
add a class so this gets higher priority
.page #teakfooter {
width: 100%;
}
.page #verybottom {
width: 100%;
}
I tried it out using Firebug and it seems to be working well like this.
Edit: After going over a few more things in the comments, I noticed a couple of things causing the footer to not fill out.
.site {
padding: 0 1.71429rem;
}
This is causing #customer footer to have padding on both sides.
#teakfooter {
margin-left: -40px;
}
This is causing #teakfooter to have whitespace on the right side.
also in firebug you can check METRICS (in right column you have Computed Styles, Styles, Metrics, etc.). In METRICS you will see that around your body there is a padding: 24px;
Solution:
body {
padding: 0;
}