I would like to change the size of post thumbnails in my home page in mobile view. I did it on desktop and tablet but I can't do it on mobile. My website is www.aytepignosi.com . The thumbnails now are too small as you can see in the screenshot. I would like to make them as they are in desktop view, that means: the image centered and automatically resized accordinglly to screen size. The CSS I used for desktop is:
.post-body img {
width:100%;
height:100%;
display: block;
}
And also if this could apply to post titles, again only for home page in mobile view. When I open a post all seem to be ok.
Thank you in advance.
(I use blogger)
This is the html of the image of the most recent post:
<div class="separator" style="clear: both; text-align: center;">
<img border="0" data-original-height="644" data-original-width="1145" height="111" src="https://1.bp.blogspot.com/-b_CL20DIHaY/Xn9AAIf_hBI/AAAAAAAAIc0/LIgULtr32mcItRO67cQ9NMJDyegolowwQCLcBGAsYHQ/s1600/%25CE%25B5%25CE%25BA%25CF%2587%25CE%25B1%25CF%2581%25CF%2584%2B%25CF%2584%25CE%25BF%25CE%25BB%25CE%25BB%25CE%25B5%2B%25CF%2580%25CE%25B1%25CE%25BD%25CE%25B4%25CE%25B7%25CE%25BC%25CE%25B9%25CE%25B1%2B2%2B%25282%2529.png" width="200" /></div>
Try to add this CSS code in your CSS file:
#media screen and (max-width:767px){
.mobile-index-title{
width:100%;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img{
max-width:100%;
}
.mobile-index-thumbnail{
float:none;
text-align:center;
}
}
Related
I got a problem with some icons (they are anchor links) on mobile devices. If I use the google toggle bar on the desktop version, everything looks fine, when I surf the page on the smartphone, the icon looks slightly stretched.
There might be some problems with the css, but I can't manage to find the problem. I have tried several times to change the height and width, but it does not seem to be working. Anybody got some idea?
Here's the html:
<img id="icon" style="max-width:100%" "max-height: 100%">
here's the css and the media queries:
#media only screen and (min-width: 300px) and (max-width:650px) {
#icon {
max-width:100%;
max-height:100%;
}
Here you made 1 html error, 1 CSS error and 1 CSS priority that you must not know. But you should also share the container of your a element.
HTML ERROR
You wrote: style="max-width:100%" "max-height: 100%"
<img id="icon" style="max-width:100%" "max-height: 100%">
But " is used to open or close a property. So the way you wrote it, max-height wont ever be taken because style is closed max-width. you should write it like:
<img id="icon" style="max-width:100%; max-height: 100%;">
CSS ERROR
Based on your CSS code, mediaquery is not closed. But it should.
#media only screen and (min-width: 300px) and (max-width:650px) {
#icon {
max-width:100%;
max-height:100%;
}
}
PRIORITY
When you are setting style property inline (directly in html), it has the priority on css setting. Except if you add !important after your css.
So to solve your problem, you have 2 solution. The snippet wont show anything because I dont have your icon. But it is to show the code clearly.
1st Solution with inline CSS:
#media only screen and (min-width: 300px) and (max-width:650px) {
#icon {
max-width:100% !important;
max-height:100% !important;
}
}
<img id="icon" style="max-width:100%; max-height: 100%;">
Solution 2 with everything in css:
#icon {
max-width:100%;
max-height:100%;
}
#media only screen and (min-width: 300px) and (max-width:650px) {
#icon {
max-width:100%;
max-height:100%;
}
}
<img id="icon">
But this code do not make any sense as you are trying to apply the same max-width and max-height no matter the screen width, it should just be like, based on what you shared:
#icon {
max-width:100%;
max-height:100%;
}
<img id="icon">
I am trying to display the content of a pdf with an iframe. Everything is working fine on a normal computer. However on mobile devices of apple (IPhone/IPad) only the first page of the pdf is getting displayed.
Here is my code where I already added some scrolling styles because I thought it was a problem related to the scrolling, but If I make the iframe very small it is possible to scroll! However the problem is still the same...only the first page is visible.
<div class="scroll-wrapper">
<iframe height="260" width="280" src="info.pdf"> </iframe>
</div>
.scroll-wrapper {
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
width: 400px;
height: 300px;
}
Maybe you should try using viewport.
Or using responsive breakpoints
#media screen and (max-width:512px) {
size:
}
#media screen and (max-width:512px) {
.scroll-wrapper{
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
width: 400px;enter code here
height: 300px;
}
}
try this
iframe {
width: 100% !important;
}
Is there a way to have an image set to a specific size while using a desktop browser, but have it automatically resize to your screen using a mobile device?
I currently just have the image hardcoded to a specific size in HTML.
<img src="URL" alt="Cool Link" style="width:720px;height:100px;border:0;">
I'm open to trying HTML/CSS/JS etc. Thanks!
You sholud add class attribute to img tag and then add below css for image
<img src="link" alt="Cool Link" class="anyofimgclass">
.anyofimgclass{
display: block;
max-width: 100%;
height: auto;
}
As Arti Rana said, you should create a class first.
Then you can use #media attribute, to set style for specific max-width. You can check this out here:
CSS #media Rule
P.S. I recommend you to use containers (div) in order to create classes.
.box {
display:inline-block;
width:100%;
text-align:center;
}
img {
display:inline-block;
width:768px;
margin:0 auto;
}
#media only screen and (max-width: 767px) {
img {
width:100%;
}
}
<div class="box">
<img src="https://www.myhappyenglish.com/x9walos9f/uploads/2013/05/placeholder.png">
</div>
https://jsfiddle.net/Sampath_Madhuranga/6t2snwa3/6/
This works fine..Try this
There is this twitch embed streaming iframe i have created, it works good side by side with the chat and perfect the way i want to, the codes are below
.t_container{
display: inline-table;
width: 100%;
}
.ts_iframe{
display: table-cell;
width: 100%;
}
.tc_iframe{
width: 250px;
float:right;
}
<div class="t_container">
<div class="ts_iframe">
<iframe frameborder="0" height="250" width="100%" scrolling="no" src="http://www.twitch.tv/esl_lol/embed"></iframe>
</div>
<div class="tc_iframe">
<iframe frameborder="0" height="250" width="100%" scrolling="no" src="http://www.twitch.tv/esl_lol/chat"></iframe>
</div>
</div>
But now I have no idea how to make it to be responsive, I mean, I can make the iframes responsive but as you can see the iframes are side by side and the embed chat is smaller and it is difficult for me to apply a responsive css since I'm not quite good with it , so is it possible to be this and when visited on smaller screens like an "iPhone" the embed chat to drop under the embed video?
Try appending this to the end of your other CSS:
#media (max-width: 768px) {
.t_container { display: block; }
.t_container .tc_iframe { display: block; width: 100%; float:none; }
}
It's going to turn your table cell approach into blocks for screens that are 768 pixels wide or smaller.
Use media queries to control the output at certain breakpoints. In this case, you can use the same concept Bootstrap would do (and does). Make them 100% width! And make sure you float them, of course.
#media (max-width: 768px) {
.ts_iframe, .tc_iframe {
float: left;
width: 100%;
}
}
Herr is the DEMO
On a full sized screen, I have three images in a column format that should, all together, take up the entire screen. Right now, my code works, in that the the images take up the width of the screen and on screen less than 600px, the images stack one top of one another. But the issue is that the images are not taking up the entire width. The code is below and I am using a sample pic that is huge, but it still doesn't show the entire height of the image.
EDITED TO TAKE OUT MY ORIGINAL CODE
Okay, per comments, I have changed the code to look: http://jsfiddle.net/zx11x99x/
.wrapper img{
float:left;
width:100%;
}
#media screen and (min-width: 600px) {
.wrapper img{
width:33%;
}
}
<div class="wrapper">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
</div>
The problem is still that the images are not full screen, which I cannot seem to figure out.
In short, I am trying to go for this, but with the columns stacking on mobile
http://jsfiddle.net/9udg7qxg/
example example example example example example example example example http://jsfiddle.net/zx11x99x/
code
Updated:
* { padding: 0; margin: 0; }
#media (max-width:1400px) and (min-width:600px) {
.wrapper > img{
float:left;
max-width:33%;
}
}
#media (max-width:600px) and (min-width:100px) {
.wrapper > img{
width:100%;
display:block;
}
}
JSFIDDLE
Just also make sure you use the correct Meta tag.