I have a site at www. structuredata. com
when the site is on a desktop it looks great. However when it starts to get narrow, the red 'register' button starts to overlap the menu,
I'd like to make a media query in my css that will force the button to drop down below the navigation when viewed on smaller screens. How would I do that?
the header is setup as
<div id="header_main">
<div class="container">
<div class="inner-container">
<strong class="logo"></strong>
<nav class="main_menu"></nav>
<div id="text-8" class="widget"> BUTTON IS HERE </div>
</div>
</div>
</div>
I tried setting my .header_main.widget
to a display:block and inline-block but neither worked. I tried clear:both on it as well.
Media queries can be tricky, you can read a lot about them here(w3c) and here(mdn)
In your case the media query will look something like so:
#media screen and (max-width:320px) {
#header_main .container .inner-container .widget {
/*Styles go here*/
}
}
Hope this helps!
Your navigation bar and your button are on a different z-index, so that's going to be tricky. That's also why clear did not work.
You could set up a media query to adjust the top position of the button (being that it is relatively positioned), like so:
#media screen and (max-width: 700px) /*Or whenever the button overlaps*/ {
#header .widget .avia-button-wrap {
top: 50px !important;
}
}
But then you'll probably have to adjust some other elements in your header to make everything look okay. But this should get you started!
Related
I'm doing a site for my uncle and I have a slight issue. When I visit it on a mobile, the Logo, site title, and navigation bar are all mushed together.
Here's what it looks like here.
How can I change this in CSS? I've looked all over, and I didn't find any answers. I've tried changing the #Media CSS part on style.css
You could try doing:
margin: 20px;
That should create a gap between the logo and the title should be farther apart. Also if you could include some code in your posts that would be great.
Since the site is currently down and there is no code what so ever, I can at least help you out with how to apply media queries.
#media (max-width: 480px) {
.<yourimg>: <your styling>;
}
This will allow whatever you are styling to be applied on screen that are LESS than 480px wide. You are obviously allowed to put in the desired width you want. This is but an example :)
You can read all about media queries here
Hope this helped a bit :)
// Marc Hjorth
i use this:
<div class="col m12 s12 l8 offset-l2"> </div>
which sets the width of the div based on the size of the screen viewing it, making it easy to design a mobile site without having to design two separate sites.
for example, i'd make a container around certain area, set it as a row with a div and then use columns which change based on screen size
<div class="sections-container">
<section id="our-vision" class="section">
<div class="row">
<a name="our-vision"></a>
<div class="col m12 s12 l8 offset-l2">
</div>
</div>
</section>
</div>
I had quick look at the website.
There is an issue with an empty side bar that pushes the navigation down.
The sidebar with the following id:
id="sidebar-header"
You should try to disable the sidebar in your theme if you don't need it.
or you can add a simple css rule to your stylesheet to not display it:
#sidebar-header { display: none; }
to move the mobile menu you can edit this style rule in style.css on line 2795:
#screen and (max-width: 760) {
...
#access {
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
padding: 0;
background: none;
box-shadow: none;
}
...
}
Edit the top and left properties there (add some pixel values like: top: 70px; for example)
I hope this helps.
I have a page, when i am looking this page on a laptop screen the two divs are rendering properly but when i am looking this page on mobile screen these two divs are overlapping above each other. I want to remove this overlapping of these divs and want to read first div then second div.
How to do that ?
#media only screen and (max-width:768px){
.vc_row-fluid.lighter-overlay,
.vc_row-fluid.darker-overlay{
display:inline-block; /* Change this to inline-block instead of block */
}
}
but this is creating issue for header,solve that accordingly
check out with Bootstrap. it provides with responsive CSS. you have to include the div class that you require.
example: if you have two divs, put them into one main div and then call each div with separate div class. like
<div class="col-sm-12">
<div class="col-sm-6">
// your code for first div
</div>
<div class="col-sm-6">
//your code for second div
</div>
</div>
try like this. it may help you.
I hope i understand your question because its not really clear(No code provided)
But what i think you need to do is the following:
<!-- Probably your html part -->
<div class = "wrapper">
<div class = "container">
<!-- Some content-->
</div>
<div class = "container">
<!-- Some content-->
</div>
</div>
Here comes the css magic.....
.wrapper{
display:block;
}
.container{
display: inline-block;
}
#media only screen and (max-width:768px){
.container{
width:100%;
}
}
#media only screen and (min-width:768px){
.container{
width:50%;
}
}
By using media querys you can easily fix this kind of stuff
You added as a comment to your question that a demo URL was http://voyagecontrol.com/canarywharf
Origin of the problem: #venue_draft has inline styles including height: 900px.
Solution: it should be removed (elements should adapt automatically to more or less content. Not fixing height is a good start for that) or, if other problems occur, replaced by min-height: 900px
I'm setting up an off-the-shelf shopping cart with a responsive design template. I have a section that is horizontally oriented with larger viewports and vertically oriented with smaller devices. I want to use copy that says "see to the right for [whatever]"... but on a smaller device, it isn't "to the right" but rather underneath. So I'd like to make it dynamically say "see below" when the viewport changes.
Possible? And simple? I don't want a mess of code that myself or other furture admin are going to have to adjust if they want to reword it. But if it can be done with a simple or whatever with all the code contained in css then that's fine.
Otherwise I'll accept "no" if that's the better answer.
You can do this using media query and the following approach.
Declare two spans having the desired data, one for large screens and other for smaller ones:
<span class="lg-view">See to the right</span>
<span class="sm-view">See below</span>
In css, display the lg-view span by default and hide the other one:
.lg-view{
display:inline-block;
}
.sm-view{
display:none;
}
Then inside media query, reverse the above styles:
#media screen and (max-width: 500px) {
.lg-view{
display:none;
}
.sm-view{
display:inline-block;
}
}
One way would be to use pseudo elements and media queries. You could do something like this:
HTML:
<div><!-- empty by design --></div>
CSS:
#media screen and (max-width: 300px) {
div:before {
content: "see below for [whatever]";
}
}
#media screen and (min-width: 301px) {
div:before {
content: "see to the right for [whatever]";
}
}
Obviously this is just a bare bones markup, but with a bit of tweaking it should do exactly what you want.
On Bootstrap 4, you could use the display property to easily manage this without writing media queries.
Sample below:
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>
More information here: https://getbootstrap.com/docs/4.0/utilities/display/
I have a normal, general CSS for a website.
After creating some #media queries to make my elements have different colors, sizes and etc on mobile and different resolutions, everything is fine.
The problem is when I resize the windows from a normal size to a small one, the effects are applied, but when I resize back to the normal one, the css is not refreshed, some "mobile" rules stay there.
How can I re-render the css without the #media rules, not refreshing the page.
This is an example of my HTML:
<div class="item">
<span class="item-foo">FOO </span>
<span class="item-bar">BAR </span>
</div>
With the following css:
.item-bar{
float: right;
}
#media only screen and (max-width: 992px){
.item-foo, .item-bar{
display: block;
float: none !important;
}
}
Here is a codepen of it:
Codepen
If you resize the view area to a small size until they turn in one span each line and go back to a bigger size, the "bar" element won't be in the right place.
As #JesseKernaghan pointed out in the comments, this is a chrome bug.
The easy-fix would be increasing the specificity for the button fixes this, as suggested by #SeanKeating.
In this question's case, adding this style fixed the problem:
.item .item-bar{
float: right;
display: inline;
}
Here is the codepen updated with the easy-fix
http://codepen.io/matheusbaumgart/pen/yyzXpp
Responsive website with a red (left) column and a blue (right) column. The red column has a black element with margin-top:30px
When the website is resized and the blue column jumps down under the red column, the red column "inherits" the margin-top.. How can this this be avoid?
http://www.bluemachines.dk/_bootstrap/downsize/
It is due to media query used in Bootstrap!
You need to learn media queries for that or if you don't need media queries! Don't use classes of Bootstrap in navigation!
Put this into #media (min-width: 768px) and (max-width: 979px) and it works perfectly.
.nav-collapse, .nav-collapse.collapse {
overflow: visible;
}
.navbar .btn-navbar {
display: none;
}
or
You can also stop the navbar from stacking by changing the
#grid-float-breakpoint variable to 1px
or
Media queries works on browser width for mobile devices u can also specify your style in media query css
#media(max-width:767px){}
#media(min-width:768px){}
#media(min-width:992px){}
#media(min-width:1200px){}
Here is link for disabling media queries
Try this:
<div class="col-md-4 col-lg-4 col-xs-4 col-sm-4">
Your Content
</div>
<div class="col-md-8 col-lg-8 col-xs-8 col-sm-8">
Your Content
</div>
Give classes for all the screen size, the problem solves!!!!