Currently in my style.css file I am using certain designs only for the mobile version of my website.
Here is the beginning tag:
#media only screen and (min-width : 150px) and (max-width : 780px)
I want to be able to set it up so that when the site is on a mobile device it does not use the   that is shown below, I want to only use   in the full desktop. Is there a way to handle this in a css file?
<td colspan="2" style="font-size: 16pt;">
Home
All Products
</td>
If you want to use CSS for that. Then on the desktop site you would have to write the HTML as this
<td colspan="2" style="font-size: 16pt;">
Home
All Products
</td>
cannot be removed dynamically using CSS. JavaScript can handle these events, but CSS is not designed to handle this.
This way you can control the space between the elements using CSS. Now in the media style, you can remove this margin.
#media only screen and (min-width : 150px) and (max-width : 780px) {
td a:nth-child(2) {
/* second a */
margin-left: 0;
}
}
I think there are two possible solutions:
Use margins instead of since the non-breaking space is protected and cannot be removed via CSS. You could apply margin:0 3%; or something alike to the anchors.
Wrap that s by a span: <span class="spacer"> </span> and apply display:none when on mobile.
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;
}
On my website I would like to have several images across the width of my page. When I am on my laptop (resolution: 1366x768) there's 7 image next to each other. When I test it on my smartphone there's 5 images next to each other and when I test it on a screen with resolution 1920x1080 there's 7 and some space open. What I want to do is get the middle 5 to always show on the screen (as this is my menu) and always in the middle of the screen. When the resolution gets changed, more or less images will appear on both sides.
In conclusion:
When on smartphone: 5 pictures.
When on laptop (normal screen): 7 pictures.
When on HD-screen: 9 pictures.
And always the 5 middle ones on the same position.
This is what I've got:
Html:
<div id="head-container">
<!--<div id="head-film"></div>-->
<div id="head-roll">
<div id="head-table">
<table>
<tr id="headTable">
<td>
<img src="./files/img/frame1.png"/>
</td>
<td>
<img src="./files/img/frame2.png"/>
</td>
<td>
<img src="./files/img/frame3.png"/>
</td>
<td>
<img src="./files/img/frame4.png"/>
</td>
<td>
<img src="./files/img/frame5.png"/>
</td>
<td>
<img src="./files/img/frame6.png"/>
</td>
<td>
<img src="./files/img/frame7.png"/>-->
</td>
</tr>
</table>
</div>
</div>
</div>
css:
div#head-table{
z-index:2;
position:absolute;
}
I have tried to seperate the table in 2 tables and let them each take 50% of the screen with a margin of 50% like this:
div#head-table-left{
width:50%;
margin-right:50%;
}
div#head-table-right{
width:50%;
margin-left:50%;
}
But when the resolution changes, the left table will stick to the left side of the screen.
Is there a way to solve this? Or something completely different? Thanks!
If you keep them all in one container (BTW, I'm not sure a table is ideal for content that's not actually tabular data: for a menu, a <ul> with the <li>s set to float:left or display: inline-block is a better HTML structure. But back to your question…) :)
I recommend keeping all the images in the same block and using 2 media queries to hide certain elements as the screen gets smaller.
#media screen and (max-width: 960px) {
#headTable td:nth-child(1),
#headTable td:nth-last-child(1) {
display: none;
}
}
#media screen and (max-width: 600px) {
#headTable td:nth-child(2),
#headTable td:nth-last-child(2) {
display: none;
}
}
I'm just using 600px and 960px as estimates: change those to whatever screen widths fit your design. Quick caveat: CSS nth-child selectors and media queries both work on IE 9+ and all other browsers. On older browsers, If you have to support lower browsers, you'll need a fallback solution - but only for widescreen IE7 / widescreen IE8, which are both pretty rare.
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
I currently have a page that generates a table from an SQL database using PHP, including one column that contains images. Due to us now having to work on a mobile platform, I'm looking for a way to hide the images. I'm currently using display: none on an antiscreen.css file, but as the images are links, it doesn't show the links
For clarity, when the image is on a PC browser it appears like this:
<td>
<a href="link to image source:>
<img height=80 alt='Text I want to display' src="link to image source" />
</a>
</td>
And when on a mobile the image, link and text are hidden using the display:none method.
So how would you recommend I work this out?
I would probably do this:
<td>
<a href="link to image source:>
<img height=80 alt='Text I want to display' src="link to image source" />
<span class="mobileonly" src="link to image source">Text I want to display</span>
</a>
</td>
Then I would set span.mobileonly { display: none; } on the main stylesheet and span.mobileonly { display: inline; } in antiscreen.css. The advantage is that the mobile link will also be easy to style.
Another option, which works for all screen sizes under a certain nr. of pixels is to use a media query, basically similar to the above one but with the advantage that it works on any screen size smaller than the defined number of pixels.
/* Media Query for mobile */
#media screen and (max-width: 480px) {
/* This resizes tables and images to be 100% wide with a proportionate width */
/* Hide stuff on mobiles */
table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}
/* Additional Media Query for tablets */
#media screen and (min-width: 480px) and (max-width: 1024px) {
/* Hide stuff on tablets */
table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}
This should covers both mobile and tablet devices.
Code courtesy of .net email tutorial. I only stripped the parts you don't need.
Usage:
<img class="emailnomob" height=80 alt="Text I want to display" src="link to image source" />