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/
Related
<div class="col-12 col-md-7">column md-7</div>
<div class="col-12 col-md-1">spacer md-1</div>
<div class="col-12 col-md-4">column md-4</div>
I've volunteered to do some work on a page for a conference about accessibility. The organisers have used a "drag and drop" page builder but it has no editing ability for sub pages. The page they need to change has a small amount of content in the md-7 column but most of the text of the speaker bios is in the md-4 column and looks much too narrow.
They have asked me to use the "Add custom CSS functionality" to adjust the width of the columns.
So my question is how to use ONLY CSS to increase the width of the third column.
I have tried the following:
.col-12.col-md-7 { max-width:30%; }
.col-12.col-md-4 { flex-grow:5 !important; }
.col-12.col-md-4 { max-width:70% !important; }
and it expands the third column nicely on a regular screen but falls apart on mobile as the 30% width is too small for the first column.
..and it expands the third column nicely on a regular screen but falls
apart on mobile as the 30% width is too small for the first column.
Perhaps I misunderstand the problem, but can you not just use media queries? BS4 use among other media queries these definitions (your CSS included) :
#media (min-width: 1200px) {
.col-12.col-md-7 { max-width:30%; }
.col-12.col-md-4 { flex-grow:5 !important; }
.col-12.col-md-4 { max-width:70% !important; }
}
#media (min-width: 576px) {
.col-12.col-md-7 { max-width: 60%; } /* perhaps 60% fits better */
.col-12.col-md-4 { flex-grow:5 !important; } /* change other classes accordingly */
.col-12.col-md-4 { max-width:70% !important; }
}
if you don't want to use inline css, you can define a class for all columns separately. You can then select and replace any column with css. This method is a bit laborious. If you want it to change in mobile view, you have to use #media
so you have to use this method and arrange each one individually in whatever size you want it to look like.
Html:
<div class="col-12 col-md-7 my-col1">column md-7</div>
<div class="col-12 col-md-1 my-col2">spacer md-1</div>
<div class="col-12 col-md-4 my-col3">column md-4</div>
Css:
.my-col3 {
// what if you want to
}
If you want to solve the size problem using only bootstrap other than css, you need to look at the column properties in more detail. You can specify how much space to take up in what size, so you don't have to add css properties. When you do this, you can also adjust the mobile and tablet appearance by taking advantage of the bootstrap responsive features.
in short, it would be a more logical move to adjust the responsive according to the column dimensions.
You can wrap the whole thing inside a container-fluid and then define a new class for every column. Then change the width of the column in css and use #media query to define the transformation in media breakpoints.
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!
I'm trying to move a column of content down on mobile phones (no tablets), but can't figure it out. The end goal is to move the custom field data below the body text.
Via:http://beta.johnslanding.org/portland/canyon-hoops/
.one-fourth.last.right
Tried this:
#media only screen
and (min-device-width : 400px) {
-webkit-column-break-inside:avoid;
-moz-column-break-inside:avoid;
-o-column-break-inside:avoid;
-ms-column-break-inside:avoid;
column-break-inside:avoid;
}
You'll see on my iPhone the theme keeps these two columns together:
The easiest way of doing this is moving div.three-fourths (your body content) above div.one-fourth (the sidebar content) in your HTML, so something like this:
<div class="three-fourths">...</div>
<div class="one-fourth last right">...</div>
Because your content area has a float:left and your sidebar has a float:right with exact width's set, rearranging the HTML will have no effect to the way it looks, only the order of the HTML.
And, then clear the floats and set new widths to fill the viewport under your desired resolution. This will ensure it tucks under the body content under 480px screens.
#media (max-width:30em){
.three-fourths,
.one-fourth.last.right{
float:none;
width:100%
}
}
I currently use Javascript to hide my social media buttons on the main page of my Tumblr site. It's programmed to hide them only on the main page based on the url in the browser, not on any other pages.
However, I'm curious as to if there's a way to do this with just CSS (or even CSS3), similar to how media screen can make conditions for divs based on browser size. I know you can have more conditions with PHP, but Tumblr won't allow it.
Depending on the Browser size you can hide ,for example
#media (min-width: 768px) and (max-width: 979px) {
.hidden {
display:none;
}
}
or
depending on the parent class
<body class="wrapper">
.wrapper .hidden{display:none;}
You should be utilizing {block:PermalinkPage} and {block:IndexPage}.
{block:PermalinkPage}
<div class="icons">
<p>This will only appear on permalink pages.</p>
</div>
{block:PermalinkPage}
You can go a step further by wrapping it in {block:Date} if you only want it to appear on posts and not pages.
I have this html and css code:
<div class="wrapper">
<div class="a"></div>
<div class="b"></div>
</div>
#media all and (max-width: 400px), (max-height: 300px) {
.wrapper .a {
....
....
}
wrapper. .b {
....
....
}
....
....
}
Now I want that whenever wrapper gets the class "like-small", all the styles of small screen will apply even if the screen is not small. I don't want to duplicate the css code inside the media query. How can I solve that?
Another solution is to force media query to apply. Is there any way to do it?
You can try with javascript. This sentence sets the viewport width and forces browser to apply your media query:
$('meta[name="viewport"]').prop('content', 'width=400');
This is taken from this answer:
https://stackoverflow.com/a/20137580/1401341
As someone says in the comments, this will work only with browsers which support viewport tag.
You can do something like this with a bit of javascript.
In a nutshell, you'll move your media queries out of the css, and test them in JS using window.matchMedia.
When you know which one matched, you can add a className to the <html> tag, similar to the way Modernizr works. So on a phone you'd see <html class="like-small">.
Your css will be written to take advantage of those convenience classes, rather than using the native media query:
.like-small wrapper.a {}
.like-large wrapper.a {}
(I also like to add .not-like-small, .not-like-medium classes to <html> as well, to further simplify the css)
So now, after the regular media query is matched and the appropriate classname is appended to the document, RWD works pretty much as normal. And if you want to force a particular style you can just rewrite the classNames on the HTML tag to affect the entire page, or add a className to any parent element to affect only part of the page.
In newer versions of Chrome you can "emulate" a mobile device in order to trigger / test your media queries in a desktop browser. (Internet Exploder 11 has the same behavior!) You may have to refresh the browser after applying the emulation; Chrome 35 still partially applies the media queries until I hit refresh in the associated tab.
I know this question is old, but hopefully this is what you were looking for (as there wasn't an answer). And I also don't know if adding a specificity class to your CSS broke your requirement not to repeat CSS.
You can achieve what you want to do by changing the definition of your #media query. Basically, instead of saying you want something to happen when the screen gets smaller than a value, keep your small screen CSS OUT of the media query and have your media queries set up for larger screens.
Then, you just need to change the order that you call the CSS and add specificity to the styles where you want to call the class like-small.
HTML:
<div class="wrapper like-small">
<div class="a"></div>
<div class="b"></div>
</div>
<div class="wrapper">
<div class="a"></div>
<div class="b"></div>
</div>
CSS:
.wrapper.like-small .a,
.wrapper .a {
height:200px;
width:200px;
background:purple;
}
.wrapper.like-small .b,
.wrapper .b {
height:200px;
width:200px;
background:blue;
}
#media all and (min-width: 400px), (min-height: 300px) {
.wrapper .a {
height:100px;
width:100px;
background:yellow;
}
.wrapper .b {
height:100px;
width:100px;
background:red;
}
}
And the fiddle: http://jsfiddle.net/disinfor/70n37hhj/
Hopefully this is what you were after (over a year and a half ago :)
Add the same class for those sections.
<div class="wrapper">
<div class="makeMeShine a"></div>
<div class="makeMeShine b"></div>
</div>
Where a and b can have their own custom styles :)