I have this site:
http://infine-traiteur.ch/
We have 4 elements on the first page (I put a picture to understand that I mean)
http://i57.tinypic.com/288silx.jpg
If we click on a particular image (the high resolution) everything works, if you resize the window and reach the mobile links these 4 elements only and do not understand why it works.
This is code HTML:
<div class="row">
<div class="carouselspaceholder"> </div>
<div class="six columns">
<div class="cro_fpc cro_fpbig">
<div class="cro_backgroundmask"> </div>
<img class="attachment-fc1 wp-post-image" alt="front (3)" src="http://infine-traiteur.ch/wp-content/uploads/2014/09/front-3.jpg" height="340" width="465">
<div class="fptitles">
<h3 class="fptitle cro_accent">
Commandez-votre service traiteur
</h3>
</div>
<div class="slidelinkspan">
Plus d'infos
</div>
</div>
<div class="cro_fpc cro_fpsmall">
<div class="cro_backgroundmask"> </div>
<img class="attachment-fc2 wp-post-image" alt="front (1)" src="http://infine-traiteur.ch/wp-content/uploads/2014/09/front-1.jpg" height="170" width="465">
<div class="fptitles">
<h3 class="fptitle cro_accent">
Nos partenaires
</h3>
</div>
<div class="slidelinkspan">
Plus d'infos
</div>
</div>
</div>
<div class="six columns">
<div class="cro_fpc cro_fpsmall">
<div class="cro_backgroundmask"> </div>
<img class="attachment-fc2 wp-post-image" alt="front (1)" src="http://infine-traiteur.ch/wp-content/uploads/2014/09/front-1.png" height="170" width="465">
<div class="fptitles">
<h3 class="fptitle cro_accent">
Rejoignez-nous sur Facebook
</h3>
</div>
<div class="slidelinkspan">
Plus d'infos
</div>
</div>
<div class="cro_fpc cro_fpbig">
<div class="cro_backgroundmask"> </div>
<img class="attachment-fc1 wp-post-image" alt="front (2)" src="http://in-fine.dg-site.com/wp-content/uploads/2014/09/front-2.jpg" height="340" width="465">
<div class="fptitles">
<h3 class="fptitle cro_accent">
Suggestions de la semaine
</h3>
</div>
<div class="slidelinkspan">
Plus d'infos
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
Can you help me to solve this problem please?
Thanks in advance!
Lines from 4627 to 4643 in your site.css file (Media queries for mobile)
Remove or comment this lines.
Related
On my website, when I enter with my phone, the responsive css doesn't work.
Im thinking that it's something with the css code or with the padding.
If I enter with my computer I can see the post correctly, but when I enter with my iPhone 7, the responsive css doesn't work.
This links are picture with the problems:
image1 image2
This is the code that I have done:
'
<div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
<div id="portfolio-post-4594" class="portfolio-column portfolio-post portfolio-hover-style-1 all casa-nueva width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
<div class="portfolio-content-container">
<div class="portfolio-thumbnail">
<img width="920" height="920" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/920x920-850_3591.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt=""> </div>
<div class="portfolio-caption-content">
<a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/casa-nueva/" target="_self"></a>
<div class="portfolio-content-inner">
<div class="portfolio-content-details">
<h5 class="portfolio-title">Casa Nueva</h5> </div>
</div>
</div>
</div>
</div> <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
</div>
</div>
</div><!-- #main -->
</div><!-- #primary -->
Hollywood Hills Contemporary
<div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
<div id="portfolio-post-4640" class="portfolio-column portfolio-post portfolio-hover-style-1 all oakmoreroad width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
<div class="portfolio-content-container">
<div class="portfolio-thumbnail">
<img width="720" height="720" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/720x720-SERVICES-bedroom3-9545OakmoreRoad.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt=""> </div>
<div class="portfolio-caption-content">
<a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/oakmoreroad/" target="_self"></a>
<div class="portfolio-content-inner">
<div class="portfolio-content-details">
<h5 class="portfolio-title">oakmoreroad</h5> </div>
</div>
</div>
</div>
</div> <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
</div>
</div>
</div><!-- #main -->
</div><!-- #primary -->
Oakmore Bvld.
<div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
<div id="portfolio-post-4688" class="portfolio-column portfolio-post portfolio-hover-style-1 all philo width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
<div class="portfolio-content-container">
<div class="portfolio-thumbnail">
<img width="920" height="920" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/920x920-livingroom2-080A3756.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt=""> </div>
<div class="portfolio-caption-content">
<a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/philo/" target="_self"></a>
<div class="portfolio-content-inner">
<div class="portfolio-content-details">
<h5 class="portfolio-title">philo</h5> </div>
</div>
</div>
</div>
</div> <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
</div>
</div>
</div><!-- #main -->
</div><!-- #primary -->
Philo Hills Blvd.
<div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
<div id="portfolio-post-4718" class="portfolio-column portfolio-post portfolio-hover-style-1 all wilshire width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
<div class="portfolio-content-container">
<div class="portfolio-thumbnail">
<img width="920" height="920" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/920x920-10450-Wilshire-Blvd-UNIT-2A-print-024-024-Bedroom-2-4200x2800-300dpi.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt=""> </div>
<div class="portfolio-caption-content">
<a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/wilshire/" target="_self"></a>
<div class="portfolio-content-inner">
<div class="portfolio-content-details">
<h5 class="portfolio-title">wilshire</h5> </div>
</div>
</div>
</div>
</div> <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
</div>
</div>
</div><!-- #main -->
</div><!-- #primary -->
Wilshire Blvd.'
You have got a inline content wider than screen of your phone, probably
img width="920" height="920" .....
If you want to fix this problem making the pictures (or any element) responsive to each device, you have to express them in term of a percentage of the size of each device or using vw and vh units
I have this html structure :
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet"/>
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg" />
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
</div>
</div>
But then once loaded in electron, the last div (.metadataContainer2) is moved inside the .previewContainer2 div :\
<div class="wrapper2">
<div class="previewContainer2">
<div id="previewGroup">
<div id="filePreview">
<div id="icon">
<div id="whiteSheet">
<div id="extension">EXT</div>
</div>
</div>
<img id="thumbnail" src="assets/indesign.svg">
<div id="fileName">aaa</div>
</div>
</div>
<div class="metadataContainer2">
<p>ncndnlkcd</p>
</div>
</div>
</div>
Did I do something wrong ?
If you follow the HTML5 rules a div tag can not be self closed. Check more on this site
So modify your original code line#6 to mentioned below.
<div id="whiteSheet"></div>
I am having some difficulties. I am developing a website and am having issues with the social link icons going tiny when the screen size is reduced. I'd like to use media queries to specify the size for smaller screens - what I am trying is not working.
Social links at top of page:
`<div class="container">
<div class="row-1">
<!--First column-->
<div class="col-sm-3">
<img src="images/fbGrey.png" class="img-responsive"
style="width:50px" alt="Find us on Facebook">
<hr class="vertical"/>
</div>
<!--Second column-->
<div class="col-sm-3">
<img src="images/twitterGrey.png" class="img-responsive"
style="width:50px" alt="Follow us on Twitter">
<hr class="vertical"/>
</div>
<!--Third column-->
<div class="col-sm-3">
<img src="images/instagramGrey.png" class="img-responsive"
style="width:50px" alt="Follow us on Instagram">
<hr class="vertical"/>
</div>
<!--Fourth column-->
<div class="col-sm-3">
<img src="images/pinterestGrey.png" class="img-responsive"
style="width:50px" alt="Follow us on Pinterest">
<hr class="vertical"/>
</div>
</div>
</div>`
Social links in footer:
`
<!--First column-->
<div class="col-md-3">
<!--Social buttons-->
<!--First column-->
<div class="container">
<div class="row-3">
<div class="col-sm-3">
<img src="images/fbGrey.png" class="img-responsive"
style="width:70px" alt="Find us on Facebook" id="fb">
<img src="images/twitterGrey.png" class="img-responsive"
style="width:70px" alt="Follow us on Twitter">
<img src="images/instagramGrey.png" class="img-responsive"
style="width:70px" alt="Follow us on Instagram">
<img src="images/pinterestGrey.png" class="img-responsive"
style="width:70px" alt="Follow us on Pinterest">
</div>
</div>
</div>`
Additionally, within the footer the height of <div class="footer-copyright">
increases when the screen size is reduced - anybody know why this is happening? I would also like to use media queries to fix this but it doesn't seem to work.
`<!--footer-->
<div class="span4">
<!-- empty, but using spacer to prevent collapse -->
<div class="spacer10"></div>
</div> </div>
<!--Second column-->
<div class="col-md-3">
<h5 class="title">OUR SERVICES</h5>
<p>Treatments</p>
<p>Bookings</p>
<p>Shop</p>
</div>
<!--First column-->
<div class="col-md-3">
<h5 class="title">COMPANY</h5>
<p><a href=index.html>Home</a></p>
<p>Location</p>
<p>Contact</p>
<p>Privacy Policy</p>
</div>
<!--Second column-->
<div class="col-md-3">
<h5 class="title">CONTACT</h5>
<strong>Hands on Sports & Holistic Therapy</strong><br>
50 Westonfields<br>
Bridgetown<br>
Totnes<br>
TQ90 5QX<br>
<abbr title="Phone">P: 07450232531</abbr><br><br>
</address>
<address>
<strong>Email: </strong><br>
jo#handson-therapy.com
</address>
</div>
</div>
</div>
<hr>
<!--Copyright-->
<div class="container">
<div class="row-5">
<div class="col-sm-12">
<div class="footer-copyright">
<div class="container-fluid">
<center>© 2017 Copyright: Hands on Sports & Holistic
Therapy. All rights reserved.</center>
</div>
</div>
</div>
</div>
<div class="span4">
<!-- empty, but using spacer to prevent collapse -->
<div class="spacer40"></div>
</div>
</footer>
<!--/.Footer-->`
Here is my code in JSFiddle - obvs no images present.
https://jsfiddle.net/AnnieWebDev/frrvmpnr/
Thanks for your help :)
have you tried to set min-width: 70px !important; on the img tag. This way the image will not go any smaller than the value which you set in there.
You have several errors in your code. Enter your code here and hit check and then fix the errors. html validator
Take </link> off the end of the <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>
<center> is obscolete, use css. In your css style sheet you can add h1 {
text-align: center;} or inline html do it like this <h1 style="text-align:center;">Centered Heading</h1>
Try adding this in your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
How could I possibly create four grid blocks with height and width in percentage so it could automatically resize on mobile, below is the image of what i am talking about.
I mean - 4 grid blocks , one big one at the left , and one at the right top, with the remaining two juts below the second grid block, trust me this is how best i can explain this, i would so much love and appreciate your Help.
<div class="the-home-big-grid">
<div class="the-real-big-grid">
<div class="first-big-guy">
<img src="assets/img/7.jpg" class="img-responsive" />
<div class="biggrid-overlay">
<div class="before-big-grid-overlay-content">
</div>
<p class="the-big-grid-overlay-cat">
Web Designing
</p>
<h2 class="biggrid-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-big-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
</div>
<div class="secound-big-guy">
<img src="assets/img/2.jpg" class="img-responsive" />
<div class="secound-biggrid-overlay">
<div class="before-secound-grid-overlay-content">
</div>
<p class="the-secound-grid-overlay-cat">
Web Designing
</p>
<h2 class="secound-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-secound-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
<div class="third-big-guy">
<img src="assets/img/1.jpg" class="img-responsive" />
<div class="third-biggrid-overlay">
<div class="before-third-grid-overlay-content">
</div>
<p class="the-third-grid-overlay-cat">
Web Designing
</p>
<h2 class="third-the-featured-title">
The Diffrent typs of Desk there is
</h2>
<div class="the-third-grid-featred-post-data">
<img src="assets/img/avatar2.jpg" class="the-auth-post-image-featured" />By Neon Emmanuel <span class="the-featured-post-date"> <i class="fa fa-clock-o the-featured "></i>3rd Dec 2016</span>
</div>
</div>
</div>
</div>
</div>
</div>
Image
Below is the image of what i meain
Here's Bootply: http://www.bootply.com/JlOEZaBkNs
<div class="row">
<div class="col-xs-6">A
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">B</div>
</div>
<div class="row">
<div class="col-xs-6">C</div>
<div class="col-xs-6">D</div>
</div>
</div>
</div>
I am building a website using Twitter Bootstrap. I have divided the page content into 4 parts - 1. is a headline (col-sm-4), 2.,3.,4 are pictures (col sm-2, col-sm-2, col-sm-4). I have made a CSS class to pull pictures down. I want them to be in one row next to the H3 headline Obrazky:. Every browser shows it exactly as I want except for Mozzila which puts those three images next to the whole webpage. I need to fix that.
HTML
<div class="col-sm-4">
<br>
<h3>Obrázky:</h3>
</div>
<div class="col-sm-2 pull-down">
<br><br>
<img src="img/mobil.png" alt="mobil" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na mobilu</strong></p>
<br>
</div>
<div class="col-sm-2 pull-down">
<img src="img/tablet.png" alt="tablet" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na tabletu</strong></p>
<br>
</div>
<div class="col-sm-4 pull-down">
<img src="img/notebook.png" alt="notebook" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na notebooku</strong></p>
<br>
</div>
CSS
.pull-down {
float: none;
display: table-cell;
vertical-align: bottom;
}
Try this:
<div class="container">
<div class="row">
<div class="col-sm-4">
<br>
<h3>Obrázky:</h3>
</div>
<div class="col-sm-2 pull-down">
<br><br>
<img src="img/mobil.png" alt="mobil" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na mobilu</strong></p>
<br>
</div>
<div class="col-sm-2 pull-down">
<img src="img/tablet.png" alt="tablet" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na tabletu</strong></p>
<br>
</div>
<div class="col-sm-4 pull-down">
<img src="img/notebook.png" alt="notebook" class="img-responsive img-center">
<p class="text-center"><strong>Zobrazení na notebooku</strong></p>
<br>
</div>
</div>
</div>