I want to include the logos of each of my portfolio pages wrapped to the right in the text. I was able to accomplish this on desktop using inline HTML to float it right:
<p><a href="link" style="padding: 0 0px; float: right;" src="img" alt=""
width="200" height="200" /></a></p>
<h4><strong>Amazin' Aces Pickleball</strong></h4>
Here is the link: http://matzniewski.com/my-work/amazin-aces/
This is what it looks like on mobile:
How can I get it so the logo sits on top of the title on mobile so they aren't scrunched together?
I figured I'm going to have to go into the CSS but I've been messing around with different commands within my
#media only screen and (max-width: 480px) {
and can't figure out how to get it right.
I am using Wordpress and SiteOrigin, if that's relevant.
Use Media Queries to adjust your float property.
.widget img {
height: auto
}
#media screen and (min-width:831px) {
.widget img {
float: right;
}
}
#media screen and (max-width:830px) {
.widget img {
float: none;
}
}
Related
I have this html tag to put an arbitrary image on a page.
<img src="https://example.com/wp-content/uploads/....186.png" width="133" height="13" style="float:right; margin-right: 100px; margin-top: 40px;" />
However, I dont want this image on mobile. Can this be done?
It is better to be mobile first.
select class for your image. for example hide-mobile. then write these codes:
.hide-mobile
{
display: none;
}
#media only screen and (min-width: 500px) {
.hide-mobile
{
display: block;
}
}
You should take a look at media queries:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
To hide the image, you would need a media query with display:none, which is only included on a low resolution.
#media only screen and (max-width: 500px) {
img {
display: none;
}
}
EDIT: It is not a good idea to define your style inline. You should rather use a seperate css file or at least a <style> block in your header. This helps with controlling different scenarios and keep your styling consistent over multiple objects and pages.
So, I basically want to have 2 different layouts for a page on my website.
For under 400px:
[image]
description
[image]
description
For above 400px:
[image] description
[image] description
(so, the image and the text are on the same line)
I know I can do this very easily with Bootstrap if my breakpoint was one of the predefined ones, but it is not. So, what would the best approach be? Could I still use Bootstrap grid system and 'hack' it somehow or do something else altogether?
Thanks!
Here is a snippet
/*screen width over 400px*/
#media (min-width: 401px){
img {
width:50px;
height:50px;
}
p{
display:inline;
}
}
/*screen upto 400px*/
#media (max-width: 400px){
img {
width:100px;
height:100px;
}
}
<img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSSHCRPXAtpOWvSaR4T5ecblzIT-RdIV19VjNB4uUPPnEq_UT5r'>
<p id='p1'>
description
</p>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEaoUONNbTby87bfUNcRrdufGcaLSbDnC3SGSqKLk1ZwNFMEE3'>
<p id='p2'>
description
</p>
Alright your going to have to use media queries. Here are a few examples that I wrote.
A media query is a set of styles(styles that you set)that has a certain screen size condition.
When this screen size condition is met the styles given inside the media query override any other styles that contradict the styles outside the media query.
Here is an example
#media (max-width: 500px) {
#visible {
display: none;
}
}
<p id="visible">Not Hidden</p>
<p>Change screen sizes!</p>
Here is the basic syntax of media queries
First make the #media then add a screen size condition (max-width: 1000px) or (min-width: 500px) heres an example using max-width. Then, add the styles inside the media query.(Dont forget to close the media query!)
#media (max-width: 1000px) {
h1 {
display: none;
}
#hidden {
display: block;
}
}
p {
display: none;
}
<h1 id="heading">Heading</h1>
<p id="hidden">Hidden</p>
Now run the code snippet above and you will see that the heading will appear when the screen size is above 1000px and it disappears and a hidden phrase appears when the screen size is below 1000px.
Here is a tutorial on media queries Media Queries
What you're looking for are css media queries. Check this page for an in-depth explanation http://www.w3schools.com/cssref/css3_pr_mediaquery.asp.
Alternatively, in your case it looks like you simply want to wrap the descriptions on to the next line when the viewport becomes too narrow. If this is the case then there's no need to add in extra markup because you can just leverage the natural behavior of inline-block elements. This link will clarify the behavior of inline-block elements for you http://www.w3schools.com/css/css_inline-block.asp.
I would go this way, using a row structure.
It will give you some more options down the road, when/if you maybe want 3 img/text lined up, or ... and so on, sooner or later maybe a header, maybe a footer.
.header {
padding: 10px;
border-bottom: 1px solid #999;
}
.container {
padding: 10px;
white-space: nowrap;
}
.container .row {
margin-bottom: 10px;
}
.container .row span {
margin-left: 10px;
}
.container .row.at-top span {
vertical-align: top;
}
#media (max-width: 400px){
.container .row span {
display: block;
margin-left: 0;
margin-top: 10px;
}
}
<div class="header">
<div class="row">
Header
</div>
</div>
<div class="container">
<div class="row at-top">
<img src="http://lorempixel.com/200/100/sports" />
<span> Some text ... being aligned at top</span>
</div>
<div class="row">
<img src="http://lorempixel.com/200/100/city" />
<span> Some text ... or at bottom</span>
</div>
</div>
Using the #media tag, how do I display a new image, for example I have a logo I want to use for my main site and a mobile logo for my mobile site, how to I display the smaller logo only on the mobile site using #media?
I've tied using "display:url('xxxx') but that hasn't seemed to work.
You'll have to put two logos on your HTML, like this:
<img src="" class="desktop-logo">
<img src="" class="mobile-logo">
Then, you'll have to hide the mobile-logo by default:
.mobile-logo {
display: none;
}
Then, on your media query, you'll have to hide the desktop-logo and show the mobile-logo:
#media screen and (max-width: 480px) {
.desktop-logo {
display: none;
}
.mobile-logo {
display: block;
}
}
What you'll want to do is create an element and set a background on it. You'll use #media control what the background image is based on the size of the window.
#media only screen and (min-width: 768px) {
.logo {
background: url('image.jpg');
}
}
#media only screen and (max-width: 767px) {
.logo {
background: url('imagesmall.jpg');
}
}
And this is what your element would look like.
<div class="logo"></div>
Create a tag with a class then use mediascreen to apply new styles to said class
create a div tag
css/
#media screen .... etc {
.image {background-image: url('wwww....');
}
So, when the exact pixels are reached at the screen it will apply a backround image to that image class I created above.
I'm trying to build a responsive HTML email. I'm attempting to do something fairly simple but getting stuck and am starting to be convinced that I may need to approach it in a different way.
I want to show certain content if the user is on a mobile device, and hide it otherwise.
My first attempt looked like:
The CSS in the head:
#media (max-width: 420px) and (min-width: 100px) {
.mobile {
display:block !important;
}
}
The HTML:
<div class='mobile' style='display:none;'>
I'm only visible on mobile :)
</div>
This works beautifully for most mail clients but not with Gmail which does not support 'display:none' without an '!important'. But, adding the !important to the inline styles means that it will not display for mobile.
I've tried a few different things including messing with visibility/opacity (figured that would be a start in the right direction, but that didn't work at all) and trying to sneak around inline styles by attempting:
The CSS in the head:
.mobile {
display: none !important;
}
#media (max-width: 420px) and (min-width: 100px) {
#fix .mobile {
display:block !important;
}
}
The HTML:
<div id='fix'>
<div class='mobile' style='display:none;'>
I'm only visible on mobile :)
</div>
</div>
But that didn't work either. Seems like it would be a pretty common problem.
Any ideas how to get around this?
Ah the beauty of software development: we get to just keep trying until things work! Found a fix. It seems like there is more than one way to get around Gmail's display: none (!important on the inline style is not the only way). Here's what worked for me:
The CSS in the head:
.mobile {
display: none;
font-size: 0;
max-height: 0;
line-height: 0;
padding: 0;
}
#media (max-width: 420px) and (min-width: 100px) {
.mobile {
display:block !important;
line-height: 1.5 !important;
max-height: none !important;
}
}
The HTML:
<div class='mobile' style='display:none;font-size: 0; max-height: 0; line-height: 0; padding: 0;'>
I'm only visible on mobile :)
</div>
How about using:
<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>
I can't figure out what I'm doing wrong here... I have two images in "sliderbox" and I need one of them to disappear on mobile and smaller devices. I'm trying to create a new class and then hiding that class, but nothing is happening. Thanks in advance!
Source:
<section class="sliderbox" id="menu-homepage">
<img src="img/arrow.png" class="arrow" alt="image" width="300" height="85" align="right">
Media Query:
#media handheld, only screen and (max-width: 980px) {
.theme-default .nivo-caption{
font-size: 21px;
}
.theme-default .nivoSlider{
height: inherit;
}
.sliderbox-class-arrow {
display: none;
}
Live # gradepowerbrandon.com/test
That's because you are doing it incorrectly.
This is how it should be:
.sliderbox img.arrow {
display: none;
You must not write the word 'class'. Just the name.
I checked your test page. It comes to me that you probably just forgot to add '.sliderbox-class-arrow' class to your image? I tried to add it, and it works fine for me.