in desktop i add '50px' padding in my page body.and its working properly but in small and medium its not working properly.yes i add some bootstrap function means #media css functionality.but although its not working.
my html=>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<div class="content-wrapper px-auto MainRenderedbody">
<section class="content">
render body
</section>
</div>
render partial body
</div>
and my css=>
<style type="text/css">
##media (min-width: ##screen-sm-min) and (max-width: ##screen-sm-max) {
.MainRenderedbody {
padding-top:100px;
}
}
.MainRenderedbody {
padding-top:45px;
}
</style>
i search about this problem? and i found some solution.i apply all of theme? nut nothing works for me? thats why i re posted this kind of problem in this website again!!!
picture of desktop screen=>
and small screen=>
Look the about 'DELETE Batch' Gone already ? but i wants it back by adding some extra padding ? and another trick? please help me to solve this problem?or give me some suggestion ? expert brothers please help?
your script already hide the Delete Batch on sm small sreen.
1. Inspect your missing `<div>`.
2. Then identify where the `div` hides.
3. `remove` that `class` name.
4. you wrote your own `class` to view it in `#media`
#media screen and (min-width: 650px){
.className
{
padding-top:100px;
}
}
Related
Everything looks great on desktop. But in the mobile view I'm seeing blog titles overlapping the blog teasers on my blog page. I am trying to add margins to the bottom of the blog post titles for the mobile view only:
I've tried adding this css:
#media all and (max-width: 1000px) and (min-width: 700px) { .entry-container .entry-title { margin-bottom:15px; }}
but that doesn't seem to do anything.
Here is a copy of the div with its classes:
<div class="entry-container"><header class="entry-header"><h2 class="entry-title"><a class="entry-title-link" rel="bookmark" href="https://avt.850.myftpupload.com/why-we-became-financial-advisors/">Why We Became Financial Advisors</a></h2>
</header><div class="entry-content"><p>Would you hand over your house keys to a stranger? That’s often what it feels like to work with a financial advisor. Not only do …</p><p class="more-link-wrap">Continue Reading <span class="screen-reader-text">about Why We Became Financial Advisors</span></p></div><footer class="entry-footer"><div class="alignleft"><img alt="" src="https://secure.gravatar.com/avatar/895fdbf242e920205673491b0b5b2b80?s=46&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/895fdbf242e920205673491b0b5b2b80?s=92&d=mm&r=g 2x" class="avatar avatar-46 photo" height="46" width="46" loading="lazy"></div><p class="entry-meta"><span class="entry-author">Written by:<br><span class="entry-author-name">Kourtney Kearney</span></span><span class="entry-date"><time class="entry-time">Published on:<br><span class="entry-time-date">September 2, 2021</span></time></span> <span class="entry-comments-link">Thoughts:<br>No comments yet</span></p></footer></div>
Just review the provided Test link, the issue is not related to Title or Responsive.
Actually margin-top: -60px!important; CSS added on .entry-content and margin-bottom: 65px; CSS on .entry-header.
Step 1:
Remove margin-top: -60px!important; CSS from .entry-content.
Step 2:
Change margin-bottom: 65px; CSS to margin-bottom: 0; on .entry-header.
Will resolve your issue on Both Desktop and Responsive versions. Thank You
There are couple of things you can check:
min-width: 700px to max-width: 1000px is not mobile view. It is usually tablet size. So if you're checking on smaller screen sizes, your CSS might not get applied.
As you can see in the snippet you pasted, normal divs will be positioned correctly one after the other without an overlap even when there is no margin set. So check if you've have a height set on .entry-container, .entry-header, .entry-title h2.entry-title. This is probably causing the header to overflow and thus overlap on the content below.
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;
}
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.
am developing an application using the jquery mobile library but i need to apply different styles to a div for desktop browsers and mobile browsers as i want to achieve the same look and feel on both platforms instead of creating different sites for them.
This is the code i wrote for the desktop browser.
<div data-role="page" id="chat">
<div data-role="header"><h1>Welcome to the Streamline Chat App</h1></div>
<div data-role="main" class="ui-content" style="margin:500px">
<form>
<label for="username" >Username:</label>
<input type="text" id="username">
<label for="pwd" >Password:</label>
<input type="password" id="pwd">
<input type="submit" data-inline="true" value="Submit">
</form>
When the user is using a desktop browser, margin for the main div tag should be 500px. If they are using mobile no margin should be applied. Is there anyway this can be achieved?
Try reading about and using media queries.
Your code should be something like:
.main {
margin-left: 500px;
}
/* For mobile screens */
#media screen and (max-width: 480px) {
.main {
margin-left: 0;
}
}
Use Media Query To make it responsive in any screen sizes. Here is the link https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You could make use of media queries. More info can be found at https://www.w3schools.com/cssref/css3_pr_mediaquery.asp. I wanted this as a comment but I need 50 rep so I'll do it this way.
Try something like this:
<body>
<div id="block" style="width:100px;height:100px">
</div>
<script>
function changeStyle(){
if(window.innerWidth<900){
document.getElementById("style").setAttribute("href","mobile.css");
}else if((window.innerWidth)>900 &&(window.innerWidth)<1200){
document.getElementById("style").setAttribute("href","medium.css");
}
else
document.getElementById("style").setAttribute("href","large.css");
}
window.onresize=changeStyle;
changeStyle();
</script>
</body>
</html>
You should use CSS #meda rules (media queries) that check the properties of the viewport, and write the CSS styles according the the viewport sizes you want.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
For example:
<style>
.my_element {
width: 900px
}
/*from screen sizes 0px to 600px*/
#media (max-width: 600px) {
.my_element {
width: 600px
}
}
</style>
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