This is incredibly simple yet driving me bonkers!
I'm working on a Wordpress theme and using the plugin Shortcodes Ultimate which bases its styling on the Bootstrap library. I am a beginner when it comes to Bootstrap and needed some help rearranging elements on a mobile/tablet device (<770px).
Basically what I'm looking to do is have the <h2> and <p> on the left side of the screen on a desktop version and the <img> on the right (which they are already).
When the viewport width is <770px I would like to have the <img> on top of the <h2> and <p>. But what currently happens is the opposite of this :(
[div]
[div]
<h2>Our Roots</h2>
<p>Some text</p>
[/div]
[div]
<img src="some-image.png">
[/div]
[/div]
Move the img div higher and use pull-right to float it to the right side for desktop views.
You can use #Media calls and create custom CSS for each of your situations and use the pull-left and pull-right classes for you first situation.
Thanks everyone for the responses, still learning bootstrap. What I did was this and it worked perfectly:
[div]
[div]
<img src="some-image.png" class="mobile">
<h2>Our Roots</h2>
<p>Some text</p>
[/div]
[div]
<img src="some-image.png" class="desktop">
[/div]
[/div]
I basically just placed the image twice and applied this CSS:
.mobile {
display: none;
}
#media screen and (max-width 770px) {
.mobile {
display: block;
}
.desktop {
display: none;
}
}
Still learning :)
Related
So I have the following desktop layout (which I am completely satisfied with):
This is my attempt to make it mobile:
I like the horizontal scroll here, but I feel that the cards are too thin; I would like to stretch my card to be more box-like (square). Ideally, the card is big enough to fill the gap between the header and the footer without causing
HTML:
<div class="page-content">
<div class="card-deck" fxLayout.xs="row" style="overflow: scroll; height:100%">
<md-card style="width:10rem;" *ngFor="let make of filteredMakes" (click)="goToModels(make.niceName)"
class="page-card mat-card">
<img md-card-image="" src="assets/img/gallery/brands/256/{{make.name}}.png" class="mat-card-image" />
<md-card-subtitle class="mat-card-title text-center">{{ make.name }}</md-card-subtitle>
</md-card>
</div>
</div>
I've tried many css tricks and tried using flexbox, but there must be something I'm missing (media queries perhaps, and how to override them).
How can I make the following styles apply ONLY to mobile?
min-height: 375px;min-width: 278px;
If anyone has any direction on how to accomplish this design, it would be greatly appreciated.
In order to get a different style for mobile, we do this:
#media (max-width: 600px) {
md-card {
min-width:17rem;
}
}
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 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 love the idea behind using a media object module as described here:
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
It's css that can apply to lots of HTML patterns and has the big advantage that it doesn't matter how big the image is or how big the container is that the module is contained in.
The problem is that it relies on the media (eg the image) coming first in the source like this
IMAGE
STARTCONTENTDIV
ENDCONTENTDIV
This becomes a semantic issue when within that content div you might have a heading like this:
IMAGE
STARTCONTENTDIV
H1
DESCRIPTION
ENDCONTENTDIV
This way the h1 is after the image even though it should be before so the document outline makes sense. It should be like this:
STARTCONTENTDIV
H1
DESCRIPTION
ENDCONTENTDIV
IMAGE
Does anyone have any ideas how to do this in a liquid layout container, when we don't know the widths of either the image or the content div?
Thanks in advance!
Flexbox allows you to rearrange content without knowing how wide the elements are. The down side is that support for it is poor (IE10+, Opera, Chrome; the current Firefox follows an older spec, but could do this layout).
<div class="container">
<div class="child">
<h1>Title Here</h1>
<p>Paragraph o' text</p>
</div>
<img class="child" />
</div>
.container {
display: flex;
}
div.child {
flex: 1 1 auto;
order: 2;
}
img.child {
flex: 0 0 auto;
order: 1;
}
http://jsfiddle.net/CNWGn/ (prefixes not included)
The website that I'm currently working on is having a few issues with Webkit browsers (Chrome, Safari, etc.)
One of those issues is that I have a bullet list that is displaying strange.
The top bullet item is going to the right of the list rather than the left.
(source: jamespwright.com)
I can't seem to fix it. I've tried overflow:hidden, I've tried list-style-position:inside, nothing seems to work.
EDIT
I will try to provide some of the code but it's a pretty huge site that is built with DotNetNuke so I might not be able to give you too much information.
The code in question is this:
#PremiumServicesMenu .LinkList ul {
margin-top: 0px;
margin-left: 1em;
_margin-left: 3em;
margin-bottom: 0px;
}
/* Safari and Chrome specific settings */
#media screen and (-webkit-min-device-pixel-ratio:0)
{
.PremiumServicesContainer .LinkList ul {
list-style-position: inside;
}
}
and the html for that section is this:
<div id="PremiumServicesMenu">
<div class="PremiumServicesContainer">
<span class="Corporate">
<div id="PremiumServicesHeader">
<div class="PremiumServicesShim"></div>
<div class="PremiumServicesTitle">Premium Services</div>
<div class="EndCap"></div>
</div>
<div class="LinkList">
<ul>
<li>AIMS</li>
<li>Feed Lab Analysis</li>
<li>MSDS</li>
<li>Prior Cargo</li>
</ul>
</div>
</span>
</div>
</div>
The problem seems to be with page height. On the other browsers if the page is not very tall, this Premium Services section still retains a height that fits everything, but in Webkit if the page is short, this section shortens itself and puts the first item next to the Premium Services header image rather than on the line below it. If the page is long enough, then this issue doesn't occur.
The answer was in the floats.
The ul needed to have clear:both; added to it.