This is only for chrome browser no spirte buttons on others...
I have a site that is supposed to reorganize with landscape and portrait views on a tablet and phone. It looks ok on Desktop and Tablet but when viewed on a phone all the elements overlap. Here's the site: http://cit-blogs.com/R00092575/responsive/index.html
The CSS for the overlapping divs looks like this:
#media (min-width: 480px) and (orientation landscape){
.leftPanel {left: 0%; position: absolute; top: 190%; width: 33%; height: 33%;}
.buttons {left: 45%; position: absolute; top: 190%; width: 40%;}
.rightPanel {left: 67%; position: absolute; top: 190%; width: 33%;
}
And
#media screen and (max-width: 380px){
.buttons {clear: both; left: 15%; position: absolute; top: 80%; width: 40%;}
.leftPanel {clear: both; margin-left:auto; margin-right:auto; top: 90%; width:100%;}
.rightPanel {clear: both; margin-left:auto; margin-right:auto; top: 130%; width:100%;}
}
I tried putting a div around the elements that get overlapped and another one around the divs that overlap but it didn't work. I am new to CSS and not sure what to do, static positioning doesn't seem to put all the divs horizontally across the screen so I don't think I can use that as seen in the Help page on my site.
The actual CSS has one of the panels set to invisible on the phone size. This was to prove that the particular CSS was being seen. Tablet and Desktop Css is getting seen. Can anyone tell me how to fix the CSS for the phone so that the buttons, advert and Twitter feed don't overlap the text and video but also realign to the horizontal and vertical positions as required for landscape and portait views. HERE IS THE FIDDLE http://jsfiddle.net/Sheeno_no_no/dZCjL/
if you are talking about your .buttons being in the middle of the screen, you have a media query in your stylesheet at line 242 that places them 52% from the top of the screen. you probably want to hide the twitter feed at that screen width as well.
if you are using the buttons as a footer, you could fix them to the bottom when in tablet or desktop and then just have the postion:static on the smaller screens so it is the last element on the page when the user scrolls to the bottom.
also you may have a closing ; missing somewhere in your css. I think thats why you see the words TV and Music
Validate your html and css at W3C
Got it sorted. Made a container div .bottomBox {margin-left:auto; margin-right:auto; width:100%;} but the leftPanel and rightPanel to float left and right respectively eg .rightPanel {float: right; width: 30%;} and put the buttons and login box into a list <ul> <li></li> with the buttons CSS to .buttons {margin-left:auto; margin-right:auto; width:10%;} This gives panels on either side with the login and buttons in the middle without any overlapping. For portait mode simply set the panels to the same as the bottomBox.
Related
I am working on developing this site and am at a loss for why, when I try to generate a sticky footer for scrolling pages such as the linked one, it will not scroll on a mobile device (tested on an iPhone in Safari and DuckDuckGo). My goal is to add a sticky footer such that the footer is at the bottom of the page always (not at the bottom of the viewport always).
I have tried to change the positioning of the footer using fixed, absolute, or relative. For fixed, it will scroll but the footer stays at the bottom of where the viewport initially was. The latter two both result in being unable to scroll the screen in mobile. However, Chrome Developer Tools using a mobile device (namely an iphone) will produce the desired behavior). I have tried various tutorials including this one on sticky footers.
I currently have my footer formatted as such,
.site-footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 30px;
background-color: white;
}
With a responsive setting for mobile that modifies a couple parameters,
.site-footer {
position: relative;
margin-bottom: 20px;
}
I realize this is not a full minimum reproducible example but I'm struggling to generate something that is portable enough to share here. Thank you.
Remove this code and you will have sticky ;)
#media only screen and (max-width: 600px)
#media only screen and (min-width: 300px) and (max-width: 767px) {
.site-footer {
position: relative;
margin-bottom: 20px;
}
}
I am trying to vertically center the title and branding of my website for tablet and smartphone mode : https://odetomytravels.com/
I would like to just add CSS code to the website theme section "aditionnal CSS".
Thank you !
site-title site-branding {
vertical-align: middle !important;
}
Curently the title and branding are sticked to the top of the page in tablet and smartphone mode.
3 things:
You did not close the media query correctly.
You did not query the class correctly.
See revised properties of the div class. I highlighted it in red.
#media only screen and (max-width: 1024px)
{
.mobile-header .mobile-site-header {
background-image: url(https://odetomytravels.com/wp-content/uploads/2019/10/Header-2_1.gif);
background-size: cover !important;
background-position: center;
}
.site-branding {
border:5px solid red;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
First you need to set the display property of that element or make sure it is set to something you can use.
Your rule vertical-align requires an inline or table block.
Then understand that centering vertically requires that the element's height is defined. If you can set the height of the element then it is pretty easy. This would try to align anything inside it.
site-title site-branding {
display:inline;
height:400px;
vertical-align: middle;
}
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
My page is split into 3 slices, as shown in this JFiddle.
In my full source code, I have media queries to help manage sizing between mobile and desktop. When someone accesses the site on mobile mode, Logo should appear at the top, and Items should appear below it. (I set display: none on my picture div to hide it)
Problem:
I can't change the positioning of the divs in HTML, or it'll disturb my current 3 slice layout. Absolute positioning is not an option, since most of my site is already dynamically sized, and I wouldn't want absolute positioning to interfere on a resolution I haven't tested on. This means calculating the margin sizes would be out of the question aswell.
So, absolute positioning is not allowed, nor is changing the orders of the divs. The result I'm looking for would be similar to this, exception without repositioning the divs.
My question is not about media queries, or how to size for mobile using media queries. I am only asking about how to get the layout I want with the restrictions in place (no absolute positing, no calculating margins, no changing div order).
Other questions I looked at:
Reposition div above preceding element - First answer suggests repositioning divs, which I cannot do. Second answer relies on calculating the position, which could interfere with other dynamically sizing elements.
Move The First Div Appear Under the Second One in CSS - Suggests I use absolute positioning, which I cannot do
Flexbox layout is your friend here. display: flex can be used to interchange the elements position on the layout.
#container { display:flex; flex-direction: column; text-align:center;}
#items { order: 2 }
#logo { order: 1 }
#picture { display: none; }
<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>
display: flex works only in modern browsers. Check caniuse.
A test on my android mobile shows it working on Firefox and Chrome, but not on the stock Android browser.
I tried to solve the solution using transform: translateY property in percentage value.
Note: This works if and only if the two containers have same height. or if the height is already known, then you can set the transform: translateY value according to the height.
CSS
#media (max-width: 700px) {
#container > div {
width: auto;
display: block;
float: none;
}
#container #picture {
display: none;
}
#logo {
transform: translateY(-100%);
}
#items {
transform: translateY(100%);
}
}
Working Fiddle
Probably the easiest is if you play with minus margins. Note that the below sizes (width and side margins) may need to be adjusted to your specific needs.
#container * {
width: 95vw;
text-align: center;
}
#items {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: left;
margin-top:30px; /* has to be smaller than the absolute of #logo */
margin-left:25%; /* half of the element's width */
}
#logo {
width: 50%; /* #picture is hidden so we split the screen into 2 */
float: right;
margin-top:-40px; /* its absolute has to be greater than the one of #items */
margin-right:25%; /* half of the element's width */
}
#picture {
width: 33%;
float: right;
display:none; /* Hiding #picture as you said you would */
}
<div id="container">
<div id="items">Items</div>
<div id="logo">Logo</div>
<div id="picture">Picture</div>
</div>
Hi and thanks for reading, am building this site http://myspacioclub.com and am using a wordpress responsive theme, and I got this image "bannerfb" with class "banner" that was asked for the customer. So inside the space for the logo I create a new div to put the banner and added this properties to the div of the banner:
.banner {
position:relative;
top:-170px;
left:450px;
}
but as the theme is responsive, when i make windows smaller like the size of tablet or cellphone the layout breaks, can someone help me?
How could I fix the theme that only use the banner properties when the window is in a bigger resolution, or any similar solution but the idea is to keep the banner with those properties without been affected by the smaller size.
You can achieve this different ways, but one way is following: First wrap your logo and banner in a div
<div class="wrap">
<div class="logo">
<a href="">
<img src="http://myspacioclub.com/wp-content/uploads/2013/04/Myspacioclub.png"/>
</a>
</div>
<div class="banner">
<img src="http://myspacioclub.com/wp-content/uploads/2013/04/bannerfb.jpg"/>
</div>
</div>
Then add following CSS:
.wrap {
position: relative;
width: 100%;
}
.logo {
width: 50%;
float: left;
}
.banner {
width: 50%;
float: right;
}
.banner img, .logo img {
width: 100%;
height: 100%;
}
You can see working example in here. Also, I have to point out, that at least at the moment you are using more than 7000px width image in your banner. This is NOT what you should do. You banner, at least in with my screen, is 700px wide. DO NOT ever use bigger images than you need. It shows 700px wide image, but you still have to load the 7000px one. Convert to smaller size! If you necessarily need bigger image for big screens, you could use javascript or css #media tag to load different image for different screen size. For that you have to set your banner image as background not as <img> and then do something like this in CSS:
#media only screen and (min-width: 35em){
/* Style adjustments for viewports that meet the condition */
.banner { background: url(path/to/image); }
}
You can set many steps like this. Just add another one, change the min-width and load different image to background.
So in your page you have to do following in CSS:
#media (min-width: 1320px){
.span8 { width:1178px; }
}
.name-logo, .banner { width: 50%; }
.banner img { width: 100%; height: 100% }
.name-logo img { width: auto; height: auto; }
.name-logo { float: left; }
.banner { float: right; }
Trick with responsive layout is to use percentage values not fixed pixel ones and do not use negative margins if possible.