http://www.bootply.com/tfGjhlJnPL
I'm trying to get the right-aligned navigation items to align vertically with the bottom of the left-aligned image.
I also want the navbar toggle button to line up with the bottom of the image in the same way when the navbar is collapsed...
Any suggestions welcome :)
Well, if you're not adverse to it, this can be achieved using primarily position:absolute. For example, based on the current styles you have, this CSS would work:
.navbar-header{
position:relative;
}
#media (max-width: 991px) {
.navbar-toggle{
position:absolute;
right:0;
bottom:0;
}
}
#media (min-width: 991px) {
.navbar-nav{
position:absolute;
right:0;
bottom:0;
}
}
Here's an updated Bootply to show you what this achieves. Depending on your preference, you may also want to adjust each element's padding or margin to alter just how close it is to the bottom of the header area (I did not change these styles in my demo). Hope this helps! Let me know if you have any questions.
Related
I have been searching all over the internet how to fix this. Basically I need the button on the right side on desktop view. See below:
chrome view
But when you resize it or viewed on mobile devices, it should be in full width but I cannot do it. see below:
mobile view
This is a sticky or scrolling menu as well. Here are my codes:
/* call button small*/
.buttonfloat-small{
position:fixed;
bottom:0px;
text-align:center;
z-index: 99;
display:block;
width:100%;
margin: auto;
}
Thank you!
You can do this by using:
.buttonfloat-small div a.fl-button {width:100%}
.buttonfloat-small div {margin:0!important}
OR by directly targeting the nodes:
a.fl-button {width:100%}
.fl-node-5907a486bf15a > .fl-module-content {margin:0}
Which will make it look like this: https://i.stack.imgur.com/epv0B.png
Side Note: The important override on the first div is to remove the 20px right margin from the ".fl-node-5907a486bf15a > .fl-module-content". Calling on it directly doesn't require the important tag (hence both examples).
This has to be put into your Media Queries to make it only appear full width when resized, like:
#media (max-width: 768px){
.buttonfloat-small div a.fl-button {width:100%}
.buttonfloat-small div {margin:0!important}
}
Changing the text to change from Call Us On to Call Now, I'd personally do with JQuery like this:
$(document).ready(function() {
var button = $(".buttonfloat-small div a.fl-button span.fl-button-text"),
resize = function() {
if (window.matchMedia('(max-width:767px)').matches) {
button.html("Call Now 0330 838 1828");
} else {
button.html("Call Us On 0330 838 1828");
}
};
$(window).resize(resize);
resize();
});
This will check if the width it 767 and if so then it will show Call Now, else it will show Call us and will also change when the window is resized.
Here's a JSFiddle showing the effects: https://jsfiddle.net/awwy5ram/1/
Let me know if you require more assistance!
I have setup a wordpress theme that uses featured images for header images on pages (I did this to make it easy for clients to modify on their own). Because the header image container needs to be a fixed size (100% width of the page and 300px heigh), I am using the "object-fit:cover" css callout which works perfect. The resulting effect is the image spans the full width of the page, and then is cropped vertically automatically (I did this so client would not need to manually size/crop the images before uploading them).
It works perfect with the exception of IE (of course). I have tried numerous possible workarounds from the "backgroundsize.htc" fix to javascripts, to absolute positioning and using the clip css feature, but it still does not give me the desired effect. IE insists on stretching the image. At this stage I am not sure if this is even doable in IE.
Here is my css for the featured image:
.wp-post-image {
width:100%;
height:300px;
position:relative;
display:block;
top:0px;
object-fit:cover;
}
img.wp-post-image {
max-height:300px;
margin:0 auto;
}
This code works in all browsers except IE, so I am using this code to feed IE overrides for the featured images:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.wp-post-image {}
img.wp-post-image {}
}
Does anyone have advice for me as to how to force IE to "fill" the featured image container with its respective image and crop it instead of stretching it? Any help is really appreciated...
Put the image in a containing div with strategic use of overflow: hidden
.wrapper {
height: 100px;
overflow: hidden;
}
<div class="wrapper">
<img src="http://sd.keepcalm-o-matic.co.uk/i-w600/keep-calm-and-wrap-it-up-3.jpg" width=600 height=700>
</div>
Okay... figured it out. I hope this solution can help someone else in the future and a big THANK YOU to Anthony for his suggestion of the wrapper... something that I thought I had to avoid...
If you are wanting to implement a featured image in your Wordpress theme that automatically crops the media file a person uploads and not have IE screw it all up, do this:
For your regular featured image - add this implementation to your wordpress theme (I usually add it in the header.php file):
<div class="wrapper">
<?php
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</div>
Then add this in your css:
.wp-post-image {
width:100%;
height:300px;
position:relative;
display:block;
top:0px;
object-fit:cover;
}
.wrapper {
height:300px;
overflow:hidden !important;
}
This will work with all browsers except IE (naturally). IE (even version 11) will skew the image within the featured image div. To fix that, add this code to the bottom of your css:
/*IE HACK*/
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
img.wp-post-image {
max-width: 100%;
height:auto;
width:auto;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
}
Adding the "max-width" and the "auto" for the regular height and width callouts, is what I was missing before.
Thanks to Anthony's suggestion to use a wrapper for the featured image, I was able to fill the wrapper with the image and force IE to not skew it. To make the image center (vertically and horizontally) in IE, I added the "top,left,transform" code which centres the large image within the wrapper in IE 11...
For anyone else using the twenty seventeen theme template, just chuck this into the "Additional CSS" section which is accessed by clicking "Customise" from your admin bar at the top of the screen. After a long time googling with limited coding knowledge, this has worked for me so figured I would share :) Special thanks to this thread for getting me in the right direction!
.single-featured-image-header img {
width:100%;
height:100%;
position:relative;
display:block;
top:0px;
object-fit:cover;
}
.single-featured-image-header {
height:25em;
overflow:hidden !important;
}
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.single-featured-image-header img {
max-width: 100%;
height:auto;
width:100%;
}}
Is there a way to make an element scroll with the background without giving it a fixed position? So it won't cause problems when resizing the window?
the element I am talking about is referred to in the css as follows.
#logo {
margin: 20px auto;
width:355.2px;
height:148.8px;
This cannot be accomplished without using position fixed, in order to fix your problem with the resize you'll need to use screen query for it. Here's an example of how to use it on your style.css file and a list of default screen sizes
=== UPDATED FOR YOUR NEEDS ===
In order to align your logo on the middle of the screen and not display it on smaller screens as you requested on the comments you'll need to use a position absolute for your #logo, to make it fixed while you scroll the page, wrap it inside of a fixed div. Here's the trick
/* Your normal css goes here */
.logoContainer{
position:fixed;
}
#logo {
left:50%; /* this puts your logo on the middle of the screen */
width:38px;
margin-left:-19px; /* this needs to be half of the width */
position:absolute;
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Your fix for smaller screen sizes example*/
#logo {
display:none; /* this tells your div to not display */
}
}
Here's an online example
I would like to know how best to accomodate the JUI accordian in a responsive design using media queries. It seems that the accordion requires more space than the div that holds it... possibly margin settings?
I ran into this problem when I tried to have two accordions side by side and responsive using media queries
#accordionA,
#accordionB { display:block; width:100%; }
/* Double Column breakpoint at 576px */
#media all and (min-width: 36em){
#accordionA { float: left; width:63%; }
#accordionB { float: left; width:37%; }
}
On a large screen the accordions are not rendered, but are identifiable as elements in the console.
If I reduce the window size they appear, but only at 520px.
I made the change to
#accordionA { float: left; width:55%; }
#accordionB { float: left; width:30%; }
and now I can see both accordions but with some of the screen unused. I could contiue to guesstimate the maximum % i can give to 2 accoridons, but I would prefer to understand what is happening here.
Why, and how much, space does the accordion widget need?
In case anyone creates this same problem for themselves the problem lies not with jquery UI accordion.
Because it is likely that the 2 accordions are of different heights remember to
clear: both
after them to stop the following div interfering.
http://library.skybundle.com/
I need the two big icons to be horizontally side by side until the window is resized to be smaller (like that of a mobile phone, for example), and then when that happens, the orange one on the right should drop down below the green one to form a vertical layout.
I know I should use media queries, as I have been told, but I am not sure how to do this or which ones to use.
I am not great at CSS, but I am learning. I have done TONS of research, spent weeks trying to figure this out. Please help. Thanks!
Make sure this is below your other rule for .skone-half.
This should work
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
}
Just comment if it doesn't.
Here's a really simplified version of that portion of your site in a fiddle.
DEMO
So according to that fiddle you can tell the code works. If you have problems implementing it let me know or if it just doesn't work for some other reason. You could also adjust the point in px it changes at if you want I just set it to when it breaks the width of the container.
EDIT:
Usually though you would want to change the width of the containing element from a fixed width to 100%, this way the images center, like this.
DEMO
In your case you have two containers with widths that you need to change so it would look like this.
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
#container, #head-content {
width: 100%;
}
}
Add this to your css file:
/*if the screen is 800 pixels or less */
#media only screen and (min-width: 800px) {
.page {width: 100%; } /*set your page class to be 100% width */
}
Here's a starting point for your jsfiddle (which exihibits the side-by-side -> vertical layout!).
http://jsfiddle.net/gjGGw/1/
HTML
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/PRODUCT_TRAINING2.png" />
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/EDUCATIONAL_COURSES2.png" />
CSS
img{width:300px;height:300px;margin:0px 30px;}