Move Content Down on Mobile Phones - css

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%
}
}

Related

How can I change column widths in bootstrap when I only have access to CSS (no way for me to change the HTML)?

<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.

change menu float when site gets narrow (responsive)

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!

Change actual text (easily?) based on screen width?

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/

How Does Twitter Bootstrap Achieve Automatic Column Stacking As Width Decreases?

In Bootstrap 3, you can use the following code to build a row with 3 columns that collapse onto one another as the screen width decreases:
<div class = 'row'>
<div class = 'col-md-4'>
Some text
</div>
<div class = 'col-md-4'>
Some text
</div>
<div class = 'col-md-4'>
Some text
</div>
</div>
I am working on a project right now where I would like to achieve the same effect, but without having to load Bootstrap.
How does Bootstrap achieve the 'stacking' effect that you would get from the above?
The basic idea is that the width of the columns work on percentages. So in your example the width of each column might be 33.333% and then you use a media query to say at a certain resolution the width of items change and they stop floating or whatever else you want to make them do on a smaller resolution.
Here's an example of a media query where any device with a resolution with a maximum width of 767px will be affected.
#media (max-width: 767px) {
.col-md-4 {
width: 100%;
float: none;
}
}
Here's a great article by Ethan Marcotte who is pretty much credited with creating what we now know as responsive web design:
http://alistapart.com/article/responsive-web-design/

Three images horizontal w/ responsive design

I need instruction on how to create a simple image grid with fluid resizing. I would like to place three (about 300px) square images on my front page that span the width and respond when the window is resized or if viewed on. If screen size is smaller, the three images will stay horizontal, but shrink. When viewed on a phone, the three images will stack with the first being at the top, the middle one second and the last one third.
I can get the images to show up, but I'm having trouble with CSS.
<div id="content" class="col-full">
<div id="grid">
<img src="http://lorempixel.com/320/320">
<img src="http://lorempixel.com/320/320">
<img src="http://lorempixel.com/320/320">
</div>
<style type="text/css">
#grid img {
float: center;
margin: 25px;
}
</style>
Any advice is appreciated for this NOOB. :-)
Try "text-align: center;" on container and "display: inline-block;" on images.
Must do the thing.
Example: http://jsfiddle.net/SvR6Z/1/
EDIT: Added ways to shrink screen.
To change images position on the page it response to window width you can do following:
Specify tags with relative sizes. For example with "width: 80%;" page width will always be 80% of the parent container (if the parent container is body, then it will be 80% of windows width). By default block-level element have width 100%; If you don't want it to be more than some value you can specify max-width property to do so. Element with: "width: 100%; max-width: 906px;" will always have width of 960px or less, no matter of window size.
If you want to have more control to the grid and decoration for mobile viewers (hede some elements for example) oyu can use css media queries ( read more about them here: http://css-tricks.com/6731-css-media-queries/ ) to do so. For example if you link css to page this way it will be working only when window width is more than 701px and less then 900px:
<link rel='stylesheet' media='screen
and (min-width: 701px)
and (max-width: 900px)' href='css/medium.css' />

Resources