Using data attributes with media queries - html

I have a page I am setting up so that it looks the image below on the widest resolution, however on smaller resolutions the page setup will change what images are being displayed on screen, so I wanted to use a media query and data attribute. Only problem is:
I am not sure if I am using the data attribute correctly, and
I have no idea how I would target the <p> tags with a selector so I can use :after to display the image of the badges after the text.
This cant use any jquery/jscript as a requirement so it's kind of a pain.
Demo, it should be configured properly with bootstrap. (The image is linked correctly, but not being displayed due to the attr.)
Sample HTML:
<div id="main" class=" container">
<div class="row">
<div class ="col-lg-6 " id="badgeBox">
<div class ="col-lg-12" data-test="<a href='http://www.va.gov/' target='_blank'><div class='badgeContainer'><img id='va_badge' class =' badges img-responsive' src='http://i.imgur.com/BAbUq6v.jpg'alt='Veteran Affairs Badge'></a></div>"> </div>
<span><p> U.S. Department of Veteran's Affairs</p></span>
</div>
</div>
</div>
Sample CSS:
.badgeContainer {
width: 30%;
}
#media screen and (min-width: 1200px) {
//some selector that targets the p tag// :after {
content:"("attr(data-test) ")";
}
}

I think setting content from a data attribute would work like this.. However, the data-test needs to be inside the p and you'll have the larger problem of encoding the HTML content inside data-test..
#media screen and (min-width: 1200px) {
p:after {
content: attr(data-test);
}
}
A more Bootstrap friendly approach would be to use the included utility classes (http://getbootstrap.com/css/#responsive-utilities) to only show the image link at larger resolutions use visible-lg.
Here's a demo with both approaches: http://bootply.com/94916

Related

Need to increase b-modal width. VueJS.Bootsrap

I use bootstrap v4 for VueJS and I need to increase b-modal.
I tried different ways mentioned here : https://github.com/bootstrap-vue/bootstrap-vue/issues/632 but nothing didn't help.
In general my code looks like :
<b-modal :ref="fieldName" :id="fieldName" :title="msg" size="lg" modal-class="b-modal">
<div class="script_table_container" v-if="scripts.length > 0">
<b-table :items="scripts" per-page="10" :current-page="currentPage">
<template slot="propertySnippet" slot-scope="data">
<samp>
{{data.value}}
</samp>
</template>
</b-table>
<b-pagination :total-rows="scripts.length" per-page="10" v-model="currentPage" hide-goto-end-buttons align="right"/>
</div>
<div slot="modal-footer">
<b-btn class="mr-sm-2 su-btn-link" #click="close">Close</b-btn>
</div>
</b-modal>
I need to increase width up to 80-90 % of the screen cause some values inside the table are long.
Hope for your help guys. I believe you're gurus.
P.S. The answer has been found .
To apply changes for a certain b-modals you can follow the next step :
I created globally:
#media (min-width: 992px) {
.modal .modal-huge {
max-width: 90% !important;
width: 90% !important;;
}
}
and after that I placed 'huge' into size prop of b-modal. "Huge" is used because the class ends with "huge" word.
It isn't always practical to make new elements in your CSS file. If you want to adapt something, you always need to search where again have I defined the width, style, did I define it already, ...
I find it easier to include it directly in my code. For b-model, I found the following solution:
<div>
<b-modal size="xl" title="Very large model"></b-modal>
<b-modal size="lg" title="Large model"></b-modal>
<b-modal size="sm" title="Small model"></b-modal>
</div>
It works for my version Bootstrap v4.3.
After debugging the CSS i found that you could add the following CSS rules in order to overwrite the existing ones and make the width more larger :
#media (min-width: 992px)
.modal-lg {
max-width: auto !important;
}
#media (min-width: 576px)
.modal-dialog {
max-width: auto !important;
}

How to make links clickable in Bootstrap via mobile?

I have a website that works fine normally but when in mobile mode, all the links (with exception of the navigation) are no longer clickable. Does anybody know how to change this? I'm not too familiar with Bootstrap though I've tried to troubleshoot as much as I can.
Here's the website: http://dominiquehall.com/dom/
Thank you in advance if anybody can help.
Remove the following code from your theme css file (agency.min.css) at line 477:
div {
height: 100%;
}
Or you can override that property by adding the following code in your custom css file:
div{
height: auto !important;
}
The problem in your code is with the property of div having height 100%, thus overlaying all the links. The div containing the image of a person playing guitar is covering the links in mobile mode. The images are hidden but the div still exist.
Another hack is hiding that particular div in mobile mode.
#media screen and (max-width:991px)
{
.target_div{
display: none:
}
}
In your case the target div is:
<div class="col-lg-4 col-md-5">
<div class="fixed">
<img src="./img/dom1.jpg" id="photo" class="hidden-sm hidden-xs" alt="">
View Resume
Equipment List
</div>
</div>
Just add a class name to the above div and a display as none for mobile devices and your site is good to go.

Media query width is not applying to col-md class?

Media query width is not applying to col-md class. Below is my code. I am using latest version of Bootstrap.
<div class = "col-md-8 article-container-fix">
<div class = "articles" >
<article class="clearfix">
<header>
line 1
line 2
line 3
</header>
</article>
</div>
</div>
CSS code
#media(max-width: 1199px){
.article-container-fix {
width: 400px;
margin-left: 1em;
background: black;
color: white;
}
}
Except width, all three other properties apply to this class ".article-container-fix" but not that "width: 400px". I don't know where I am missing anything.
I would suggest you to try it with a bit less max-width than 1199, something like 720px to see if it works or not. Other way to output this would be the following
HTML:
<div class="col-md-8">
<div class="article-container-fix">
Content here!
</div>
</div>
And use the same CSS you used before. It's complicated with bootstrap to actually get some things in place the way you want it, and for this, it could be interfering with pretty much anything. Hopefully this will work for you.
ITS Due to you have write your article-container-fix class with col-md-8 class. col-md-8 is a Bootstrap framework class. By default there is a default width given in bootstrap.css.
There is two way to overcome from this problem:
Either you have to write !important in your media query like width: 400px !important;
Or
You have to re-positioning your css in your <head> tag, include most last your responsive.css in your <head> tag.

make even / odd(nth-child) divs in listview, with different sizes connect with eachother with CSS

I am currently working on a responsive framework which contains a section that has max. 3 columns when the browser is not scaled. I use Pseudo selectors (nth) with these column to change the height of the odd divs. The responsiveness works like a charm, no problem there. The odd/even divs work fine, it behaves perfectly even when scaled down.
My problem is this:
I made a listview with divs because the intention was to make the even and the odd divs fit one below the other and next to each other seamlessly with negative top margins. That does not seem to work unfortunately. there are gaps that I can't seem to get rid of.
A mockup to clarify my intentions:
Example
I would like to have a full css solution for getting rid of the gaps but i'm afraid that's not possible unless there's something i'm totally missing.
Html:
<section class="home">
<p>It's <span id="demo"></span> today</p>
<div class="work">
<div class="work_col-1-3">test1</div>
<div class="work_col-1-3">test2</div>
<div class="work_col-1-3">test3</div>
<div class="work_col-1-3">test4</div>
<div class="work_col-1-3">test5</div>
<div class="work_col-1-3">test6</div>
<div class="work_col-1-3">test7</div>
<div class="work_col-1-3">test8</div>
<div class="work_col-1-3">test9</div>
<div class="work_col-1-3">test10</div>
<div class="work_col-1-3">test11</div>
<div class="work_col-1-3">test12</div>
</div>
</section>
CSS
#media only screen and (min-width: 35em) {
.work_col-1-3 {
position:relative;
width: 33%;
height: 200px;
background-color:purple;
display:inline-block;
margin:-2px;
}
.work_col-1-3:nth-child(odd) {
position:relative;
background-color:orange;
margin:-2px;
height:300px;
}
Also here's a fiddle. The fiddle contains just the 3 column part of the css but it should fit in every state. ( 3-column, 2-column & 1-column but the 1 column is working already)
http://jsfiddle.net/Vishumahabir/tB7Aw/
The "section" element is a child object in an "article" element.
Any thoughts? Thank you!
If the heights are set then you can use the following to do it, though it's very ugly especially if you add more elements
.tmcwork_col-1-3:nth-child(2n + 5), /* Select oranges after first line */
.tmcwork_col-1-3:nth-child(2n + 8) { /* Select purples after second line */
top:-100px;
}
.tmcwork_col-1-3:nth-child(2n + 11) { /* Select oranges after third line */
top:-200px;
}
Demo
If the heights vary or you have a lot more elements it'd be easier to look at an existing one and use a similar technique as them

Adjusting elements with css according to the browser size

So I have html page like this:
I'd want to make it so that when I resize my browser or use it on a machine with different resolution the images and buttons would adjust accordingly. I guess their width should be in relationship with the browsers size somehow.
And I also want the buttons to remain in the oder listed above not that they go under each other when I resize (
At the moment the following happens:
As you might notice the map part adjusts well but I can't figure out why the buttons wont.
Here's my index.html file part:
<div class=wrapper">
<div class="toolbar">
<a href="" onclick="touch('football')"><img alt="Football"
src="images/iconsB/football.png" class="toolbarButton" /></a> <a
href="" onclick="touch('basketball')"><img alt="Basketball"
src="images/iconsB/basketball.png" class="toolbarButton" /></a>
###and so on until the end of icons###
</div>
<div class="loginbar">
<div>
<a href="#logged-in-box" class="loggedin_button"
onclick="touch('addingplaces')">Add places</a>
</div>
<div id="loggedinbutton">
<a href="#login-box" class="login-window"
onclick="showLoginForm('a.login-window')">Log in</a>
</div>
</div>
And here's my css http://pastebin.com/0DGMfnmh
Any ideas where to start? Thanks in advance!
You are looking for CSS Media Queries. With Media Queries you are able to declare CSS rules for specific resolutions only.
If you assign a class to every image, you are able to set the width of the images through media queries. Here is a quick example:
The HTML:
<img src='#' class='icon'>
<img src='#' class='icon'>
<img src='#' class='icon'>
The CSS:
/* Default rule */
.icon {
width: 64px;
height: auto;
}
/* Rules for horizontal screen resolution <= 800px */
#media (max-width: 800px) {
.icon {
width: 48px;
}
}
/* Rules for horizontal screen resolution <= 600px */
#media (max-width: 600px) {
.icon {
width: 32px;
}
}
Have a look at this link it shows you some of the basic with what you can do with media queries if you want them to wrap so going onto separate lines I would follow #Michal 's advice