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;
}
Related
Not sure how to explain this but here I go:
I have 2 buttons (variable width, depending on the text inside) which are positioned next to each other (picture on top). When I make my screen smaller (picture at bottom), the buttons expand the parents width and position below each other. Is there a way to check when this happens?
I want to set a margin (so buttons don't stick to each other) and set a fixed width, ONLY when the buttons are positioned below each other, because of design reasons.
As far as I know, each browser renders a little bit different, and I also want a solution that will keep working when I decide to change the buttons text.
How would you do this? Is there a plugin or a simple jQuery script that can check this?
This is what I have so far: JSFiddle
<div class="cta-buttons-wrapper text-center">
this is button one
and button two
</div>
.cta-buttons-wrapper{ margin: 40px auto; }
.cta-buttons-wrapper .btn{ margin: 0 15px; }
.btn{
margin: auto 25px;
// ...
}
.btn-primary{
color: #fff;
background-color: lightgreen;
border-color: lightgreen;
}
.btn-primary-reversed{
color: lightgreen;
background-color: #fff;
border-color: lightgreen;
}
If you don't want to stick buttons add following css
.cta-buttons-wrapper .btn{ margin: 10px 15px; }
And for button width you need to set specific width for that using media query
#media (max-width: 767px) {
.cta-buttons-wrapper .btn
{
display:block;
width:60%;
}
}
This can be achieved without the need of a jQuery plugin, in CSS you can declare a media query for certain screen sizes and within that media query you can add different styles for the buttons that would only apply at that screen size, for example if the buttons are not displaying as you wish on mobile screen sizes you would add the below media query that would trigger at screen sizes that are 767px or less, like so:
#media (max-width: 767px) {
.cta-buttons-wrapper .btn {
display:block;
width: 100%; /* this will make the buttons span the width of the parent div */
margin: 0 0 30px 0;
}
}
I have declared width: 100%; so that the buttons span the width of the parent div on mobile only and when you add more text it will still look neat, whereas with a fixed width it does not give you that flexibility.
Here is an updated link to your fiddle with my added solution:
Fiddle
You can simply do this with CSS.
#media (max-width: 767px) {
.btn {
margin: 25px;
}
}
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>
I have a background image of a paper airplane on the body tag of this page: http://cogo.goodfolk.co.nz. The very tip of it is being cut off - if you resize the browser window the full image pops back in.
It's only happening in Chrome, and isn't consistent, if you refresh sometimes, or even hover over sometimes it's fine. If I remove all the background styles (background position and no-repeat) then the whole image is there - but of course isn't positioned correctly. It's also happening on other pages of my website (eg http://cogo.goodfolk.co.nz/online-surveying).
After days of debugging/searching I can't find anything that refers to this issue and/or fixes it - is it possibly a Chrome bug with background-position?
Any ideas or workarounds? Thank you!
//EDITED//
The relevant code is pasted below, although obviously this is pretty standard so it must be something else in the site that's causing the problem:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 10% 98%;
}
The background image is set to center, so this is expected behaviour, depending on window size. You could change this CSS declaration from:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
}
To:
.home {
background: url("../img/airplane.jpg") no-repeat center top;
background-size: 70%;
}
This would anchor the image to the top of the screen, meaning it would not clip, but this may not be the behaviour you are looking for.
To complicate matters, you also have this, which is probably contributing to the problem. I would suggest removing it entirely:
#media (min-width: 1200px)
.home {
background-position: 20% -10%;
}
Yay thanks to everyone who left suggestions, fortunately I've figured out a workaround! I managed to pretty much keep the background styles the same, and just placed everything in a :before pseudo element on the body tag. You can check out the updated code at cogo.goodfolk.co.nz if you're interested, or it's pasted here:
.home {
position: relative;
min-height: 860px;
}
.home:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 50% 15%;
}
Set the display to "inline-table".
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.
I'm using a responsive wordpress theme that is based on twitter bootstrap. For some reason the side bar images aren't resizing correctly. (You can see what I mean by checking out the [site][1] and trying to resize.) I was approaching this by declaring a fixed size to the widget, and then positioning the form inside it using absolutely relative positioning. The image / contact form looks fine when you are on a desk top but as you compress the layout (for instance on an iphone) the contact form and image do not resize correctly. I'm not sure where to go from here and sort of stuck.
Here's the css I'm using now (which may not be correct.) Thanks!
.widget .signupForm {
/* Box always has colour, pic always on right */
background-color: #06d0d2;
background-image: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg);
background-position: right bottom;
background-repeat: no-repeat;
/* height ensures full pic is shown */
height: 300px;
/* allow us to position contents */
position: relative;
}
/* Absolutely position the form within the widget */
.widget .signupForm form {
position: absolute;
right: 160px;
bottom: 0px;
}
.widget .signupForm form input {
display: block;
}
#media screen and (min-width: 768px) {
/* now just resize the widget box and move the form */
.widget .signupForm {
width: 300px;
height: 240px;
background-size: 100%;
}
.widget .signupForm form {
right: 120px;
bottom: 0px;
}
I can detect 3 problems at a width of 800px:
.widget .signupForm has a width of 300px. It should be auto or 100%. Then form elements are to be sized accordingly, if needed (btw the submit button has same text and background than the text input. It seems we have 2 informations to type when in fact it's the action button. It doesn't need to be white on blue, maybe a darker grey would be sufficient. I'm not a designer, though ;) )
Facebook widget has a fixed width. Does it exist a mobile version of this widget?
same problem with the Instagram one: images have an HTML width attribute of 300 (pixels).
The Following css applies to your page when it gets resized. Not sure which file is applying it.Find this class in your css files and add a width to it, say width:300px if you want it to be a perfect square or any other value.
.widget .signupForm {
background-color: #06D0D2;
background-image: url("http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg");
background-position: right bottom;
background-repeat: no-repeat;
height: 300px;
width:300px; /* code added here */
position: relative;
}
Hope it helps,if i havnt understood ur problem or this is not the solution you were looking for - do comment..