okay...
I would like to know if it's possible to target a border style that's inside a class.
I would like to do this so that when the browser window gets resized the border gets hidden or display:none.
sample of my code:
<div id="chuck" class="descr-text col-lg-6 col-md-6 col-sm-4">
some content goes here
</div>
And my css
.descr-text {
display:none;}
#media screen and (max-width: 991px){
border-right.img_beef{
display:none;
}
}
I know I could probably just wrap it in another div and then then target it when the window gets to that size, But I was wondering if there isn't a more clean simpler way to do that.
It's kind of hard to decipher exactly what you want since your class names don't match up to your markup. But if you want the border to be hidden when it reaches a certain breakpoint:
.chuck {
border: 2px solid #BADA55;
}
#media screen and (max-width: 991px) {
border: 0;
}
Related
Ok, I'm aware of media queries but they are strictly related to a certain width. Sometimes it's not convenient. Say I have bootstrap navbar with logo image and h1 in one line, like here
<nav class="navbar">
<a class="navbar-brand">LOGO</a>
<h1 class="d-inline">Long enough header</h1>
</nav>
https://jsfiddle.net/zzmaster/qno7utp0/2/
On a certain screen width it wraps into two lines. I'd prefer to hide the logo and make this process independent of the width of the second element. Ideally I think of a class of hiding priority like this
<div class="container">
<div class="prio-1">one</div>
<div class="prio-2">two</div>
<div class="prio-3">three</div>
</div>
meaning preventing line wrap by hiding less priority-objects. Is it possible?
I believe this is the solution. So as per this css
If width is more than 500px all the three prio-3, prio-2, prio-1 will be visible.
If width is between 200px and 500px both prio-2, prio-1 will be visible.
If width is less than 200px only prio-1 will be visible.
#media screen and (max-width: 500px) {
prio-3 {
display: none;
}
}
#media screen and (max-width: 200px) {
prio-2 {
display: none;
}
prio-3 {
display: none;
}
}
I have created a website using bootstrap and the responsive features works fine, except for the background color of the div. The elements (images) are stacked but the background color remains only behind the first image in the row. I am looking for a way to extend the background-color on mobile devices.
HTML:
<div id="omos">
<div class="row">
<div class="col-md-6 col-xs-12">
<h2>Kristoffer Andreasen</h2>
<img style="height:280px; width:420px;" src="http://i.imgur.com/874qJmM.png" class="img-responsive">
<div class="Krille">
<p>Indhold</p>
<p>Marketing</p>
<p>Webdesign</p>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="Kalli">
<h2>Kasper Hjortsballe</h2>
<img style="height:200px; width:200px;" src="http://i.imgur.com/kTleong.png" class="img-responsive">
<p>Programmør</p>
<p>Layout</p>
<p>Grafik</p>
</div>
</div>
</div>
</div>
CSS:
#omos {
background-color: #f7f7f7;
height: 80vh;
clear: both;
text-align: center;
}
I have tried several options but no one seems to solve the problem. Does anyone know what to do?
Remove the height property of the div, and it should work.
Bootstrap uses media queries to show things differently on differnet sized screens. If you're saying your CSS works on desktop but not on mobile, it would be because you're not using media queries.
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
/* your mobile css, change this as you please */
#omos {
background-color: #f7f7f7;
height: 80vh;
clear: both;
text-align: center;
}
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
/* your desktop css */
#omos {
background-color: #f7f7f7;
height: 80vh;
clear: both;
text-align: center;
}
}
let's think about what your style sheet does,
height: 80vh;
that makes us do something that is 80% of the viewports height, so if our div stacks outside of that when switching to 12 col it is not going to get the color, as your color is not based on the div, but is based relative to the viewport, twitters media queries however will change your child elements and override this wrapping divs height, so you get stuck, I'd see if min-height will work, or remove height all together if possible(not sure what you're vision is exactly)
Set the height property to auto, it will work fine.
height: auto
I want to put the contents of map and form side by side. I want the code to have responsive design. I have tried putting contents in table and list format. But still form is on top of map. I want to have contents side by side when it is displayed on a wider screen. While on smaller width screens have them on one over the other.
Please can anyone suggest best way to achieve this?
Well, that's pretty simple with medias queries ...
HTML
<div id="map"> <!-- your map --> </div>
<div id="form"> <!-- your form --> </div>
CSS
#map, #form {
width: 50%;
float: left;
}
#media handheld, only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
#map, #form {
width: auto;
float: none;
}
}
Replace 500px with your breaking point when you don't want DIV side by side anymore.
I have a table built out of div elements. By default elements display as table-cell.
On #media screen and (max-width: 769px) elements need to become table-row.
Every browser works fine except Safari.
In safari it shows fine until I re-size window to very narrow and then back full width. at that point table breaks. if I refresh page or disable and re-enable table-cell style table fixes itself.
Example:
http://jsfiddle.net/sergejpopov/TvEWf/
Is that a Safari bug? How to fix?
It sounds like you're not adhering to a correct structure- you shouldn't swap out table-cell for table-row, they serve two distinctly different purposes which are not equivalent in terms of interpreted layout, the table structure should always follow:
table (display-table)
row (display-row) <- important to denote a row of elements
cell (display-cell) <- important to denote (column based) content within a row
/cell
/row
/table
You're missing out either the row or cell level with your approach, so although everythign seems to be interpreted correctly for the most part, your css is actually in error.
I would suggest you consider using floated or inline divs, see
FIDDLE
HTML
<div class="t">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
CSS
*{
box-sizing:border-box;
}
.t
{
width:100%;
}
.t>div
{
border:1px solid red;
display:inline-block;
width:25%;
margin:0;
padding:0;
zoom:1;
}
#media screen and (max-width: 769px) {
.t
{
width:100%;
display:table;
}
.t>div
{
border:1px solid red;
display: block;
width:100%;
zoom:1;
}
}
I have a problem where I wish to alter the positioning of webpage using CSS for a mobile view. The current set up for desktop is a sidebar floated to the left and a textbox floated to the right. The HTML is as follows:
<div id="container">
<div id="sidebar">...</div>
<div id="textbox">...</div>
</div>
My dilemma is that on mobile devices I wish for the sidebar content to appear under the textbox and I am struggling to produce the CSS to do this. I am using media queries to target smart phones eg:
#media screen and (max-width:479px) {
/* Target portrait smartphones */
}
Can anyone provide me with the CSS to do this? Thanks in advance.
It's pretty simple, in order to do that you should use it like this
<div id="container">
<div id="textbox">...</div>
<div id="sidebar">...</div>
</div>
The textbox first because you'll remove float for mobile. So the textbox goes first then the sidebar.
The css:
.textbox {
width: ***px;
float right;
}
.sidebar {
width: ***px;
float left;
}
#media screen and (max-width:479px) {
/* Target portrait smartphones */
.textbox, .sidebar {
float: none;
}
}
Hope this helps ! :)
It would be easiest to have #sidebar after #textbox in your html, this wont effect desktop viewing, and then for mobile you can just remove the floats:
#media screen and (max-width:479px) {
#sidebar, #textbox {
float: none;
}
}