I have an HTML document. When I run it in localhost it runs well. But the problem occurs when I run it in live server. the gallery item is overflowing. But the interesting things is when I resize the windows it automatically fixes itself. I have used Magnific popup and Isotope.
Images that shows in live server
here is my html code:
<div class="gallery">
<div class="row">
<!-- gallery Image -->
<div class="col-sm-6 col-md-4 gallery-item department doctor patient" href="assets/images/gallery/gallery-3.jpeg">
<img src="assets/images/gallery/gallery-3.jpeg" alt="" class="gallery-img" />
</div>
<!-- gallery Image -->
<div class="col-sm-6 col-md-4 gallery-item doctor department" href="assets/images/gallery/gallery-4.jpeg">
<img src="assets/images/gallery/gallery-4.jpeg" alt="" class="gallery-img" />
</div>
<!-- gallery Image -->
<div class="col-sm-6 col-md-4 gallery-item department" href="assets/images/gallery/gallery-5.jpeg">
<img src="assets/images/gallery/gallery-5.jpeg" alt="" class="gallery-img" />
</div>
<!-- gallery Image -->
<div class="col-sm-6 col-md-4 gallery-item doctor department" href="assets/images/gallery/gallery-6.jpeg">
<img src="assets/images/gallery/gallery-6.jpeg" alt="" class="gallery-img" />
</div>
<!-- gallery Image -->
<div class="col-sm-6 col-md-4 gallery-item surgery department" href="assets/images/gallery/gallery-7.jpeg">
<img src="assets/images/gallery/gallery-7.jpeg" alt="" class="gallery-img" />
</div>
<!-- gallery Image -->
<div class="col-sm-6 col-md-4 gallery-item patient" href="assets/images/gallery/gallery-8.jpeg">
<img src="assets/images/gallery/gallery-8.jpeg" alt="" class="gallery-img" />
</div>
<div class="col-sm-6 col-md-4 gallery-item doctor" href="assets/images/gallery/gallery-9.jpeg">
<img src="assets/images/gallery/gallery-9.jpeg" alt="" class="gallery-img" />
</div>
<!-- gallery Image -->
</div> <!-- end .row -->
</div> <!-- end .gallery -->
This has to do with how your images are loading. I'm guessing on the live server they are making a call to the server and then being injected into the DOM using JavaScript. There are a variety of ways to fix this but the simplest is to add the width and height attributes on your image tags.
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
https://www.winepeople.com.au/4270001
CSS
float: right
winepeople logo is in the people even though the css id declared as right. I couldnt figure it out. Please help
<div id="header-logo" class="col-xs-6 col-sm-6 col-sm-offset-6">
<a href="/">
<img src="/images/au/en/brands/wp/recr/WP_logo.gif" alt="Laithwaite's Wine" class="img-responsive pull-right">
</a>
</div>
A combination of .pull-right on the image and a .col-sm-offset-6 will work to get your desired result in most situations. There are many other possibilities.
I suggest you review the Bootstrap 4 layout grid docs here: https://getbootstrap.com/docs/4.1/layout/grid/
Answer #2:
Pertains to:
https://www.winepeople.com.au/jsp/offer/recr/au/wpe/offer_temp5.jsp?offerId=91100022&promoCode=4271001&offer=2018/november/4271001&utm_source=my241&utm_medium=email&utm_campaign=4271001&utm_content=rec_xmas
This page has Grid CSS borrowed from Bootstrap, but does not seem to have the required media queries to isolate class behavior by screen size. Hence, you have a battle between .col-xs-5 and .col-sm-6. The CSS will work if you remove your .col-xs-5 class until your CSS library can be properly compiled.
HTML
<div class="header-container clearfix">
<!-- Begin logo -->
<div id="header-logo" class="col-xs-5 col-sm-6">
<a href="/">
<img src="/images/au/en/brands/wp/recr/my241_logo.jpg" alt="My241" class="img-responsive">
</a>
</div>
<!-- End logo -->
<div class="col-xs-2 visible-xs"> </div>
<!-- Begin logo -->
<div id="header-logo" class="col-xs-5 col-sm-6">
<a href="/">
<img src="/images/au/en/brands/wp/recr/WP_logo.gif" alt="Laithwaite's Wine" class="img-responsive" style="float:right">
</a>
</div>
<!-- End logo -->
</div>
Should become:
<div class="header-container clearfix">
<!-- Begin logo -->
<div id="header-logo" class="col-sm-6">
<a href="/">
<img src="/images/au/en/brands/wp/recr/my241_logo.jpg" alt="My241" class="img-responsive">
</a>
</div>
<!-- End logo -->
<div class="col-xs-2 visible-xs"> </div>
<!-- Begin logo -->
<div id="header-logo" class="col-sm-6">
<a href="/">
<img src="/images/au/en/brands/wp/recr/WP_logo.gif" alt="Laithwaite's Wine" class="img-responsive" style="float:right">
</a>
</div>
<!-- End logo -->
</div>
I need to align the image to the left but css bootstrap is automatically aligning it to the center. how to fix it?
<div class="container">
<div class="row">
<div class="col-md-6 img-left"></div>
<img src="http://placehold.it/150x150" alt="this is the portfolio main photo">
<div class="col-md-6 text-right text-uppercase">
<h1>Bruno</h1>
<h4>The SAVIOR</h4>
</div>
</div>
</div>
the problem
I think you need to close the div that contains your image/anchor after the closing anchor tag. Like so:
<div class="col-md-6 img-left">
<img src="http://placehold.it/150x150" alt="this is the portfolio main photo">
</div>
I can't actually test this but give it a try, I think it should solve your problem.
Looks like you are closing tag with left align before the image.
<div class="col-md-6 img-left">
<img src="http://placehold.it/150x150" alt="this is the portfolio main photo">
</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">
I wish to have a group of centered images arranged in a certain way on the homepage of a bootstrap site. To look like the image below:
I want them to remain centered and then shrink when we go to mobile, with the "freeshipping block" not displaying so it just the two horizontal blocks below 750px.
I have set up a Plunker with the code I have
https://plnkr.co/edit/l6rbmEZQbqGZYifBmF5k?p=preview
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12 customer-greeting">
<p class="intro_text">My opening blurb of text</p>
<div class="offerscontainer">
<div class="offeroftheday">
<a href="product_info.php?products_id=221">
<img class="img-responsive" src="http://i.imgur.com/TQ6gwoO.jpg">
</a>
</div>
<div class="freeshipping">
<img class="img-responsive" src="http://i.imgur.com/Xqw75nl.jpg">
</div>
<div class="24hrdelivery">
<a href="index.php?cPath=53">
<img class="img-responsive" src="http://i.imgur.com/F3JTlas.jpg">
</a>
</div>
</div>
</div>
Should I be adding float classes or should they all be bootstrap col-8-sm, col-4-sm etc?
PS - Should #queries be used in Bootstrap sites or should they pretty much all layout be handled in the HTML code with col-8-sm (bootstrap classes) etc
You can do it like this..
HTML
<div class="container">
<div class="row">
<div class="col-sm-8">
<img class="img-responsive width-100" src="http://i.imgur.com/TQ6gwoO.jpg">
<br>
<img class="img-responsive width-100" src="http://i.imgur.com/TQ6gwoO.jpg">
<br>
</div>
<div class="col-sm-4">
<img class="img-responsive width-100" src="http://i.imgur.com/Xqw75nl.jpg">
</div>
</div>
</div>
CSS
.width-100 { width: 100%; }
You can write col-md-* or col-sm-* depending on your requirement!