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
Related
I want to make 3 columns horizontal and ı use col-md-12 for main column and for child columns col-md-4 but my row have only one columns and sub divs are vertical.My english not good enough but please help me.All divs are under other div and all divs are left side of page.I try my html in other project this is worked but in this projecy one thing corrupted my grid system but ı cant find it.
This is my nested Layout
#model HomeViewModel
#*#{
ViewData["Title"] = "News";
}*#
#section PageTitle{
etwyrjs
}
#section PageDesc{
etwyrjs
}
#*<div class="col-md-12">
<h2>News</h2>
</div>*#
#foreach (var pie in Model.Pies)
{
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="#pie.ImageThumbnailUrl" alt="" />
<div class="caption">
<h3 class="pull-right">#pie.Price.ToString("c")</h3>
<h3>
<a asp-controller="Home" asp-action="Details"
asp-route-id="#pie.Id">#pie.Name</a>
</h3>
<p>#pie.ShortDescription</p>
</div>
</div>
</div>
}
This is my nested Layout.
#{
ViewData["Title"] = "LayoutForOthers";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row">
<div class="col-md-12">
<img src="~/images/büyük foto-1.png" alt="Snow" style="width:100%;">
#*<div class="bottom-left">
</div>*#
<div class="top-left">
<h1 style="text-align:left; color:white">#RenderSection("PageTitle")</h1>
<br />
<br />
<p style="text-align:left; color:white;">#RenderSection("PageDesc") Dijital sağlık alanında dünyanın önde gelen isimlerinden olan ve İngiltere'nin en büyük sağlık teknolojisi topluluğu Health 2.0 London'ı kuran Maneesh Juneja, yapay zekanın geleceği hakkında önemli açıklamalarda bulundu. Kendisini ''dijital sağlık fütüristi'' olarak nitelendiren Juneja, geçtiğimiz hafta İstanbul'da katıldığı etkinlikte yapay zeka ile ilgili soruları yanıtlarken 2040 yılının önemli bir dönüm noktası olabileceğini işaret etti.</p>
</div>
#*<div class="top-right">Top Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>*#
</div>
</div>
<div class="row">
<div class="col-md-12">
#RenderBody()
</div>
</div>
This is from my main layout.
<div class="col-md-12">
#RenderBody()
</div>
Are you looking for something like this? This should work regardless of what your Bootstrap version is. (Open it in fullscreen)
<!-- Include this in your <head> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-sm-12 bg-primary">
<!-- This is you full width column -->
<p>This is you full width column</p>
</div>
<div class="row">
<div class="col-sm-4 bg-danger">
<!-- This is 1/3 columns -->
<p>Column 1</p>
</div>
<div class="col-sm-4 bg-info">
<!-- This is 2/3 columns -->
<p>Column 2</p>
</div>
<div class="col-sm-4 bg-success">
<!-- This is 3/3 columns -->
<p>Column 3</p>
</div>
</div>
</div>
I'm coding a page that uses nested bootstrap columns. I am using push/pull to have the columns switch places on mobile, and it's working great. However, on desktop I've got some odd spacing issues. The nested columns are offset to the right of the parent column.
I've set up a fiddle that shows this behavior. In this example, col-md-9 is the parent div. I've given it a gold background to show the behavior. When you resize the output, the nested divs flow into place as expected. Any insight to this issue would be greatly appreciated.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-12 col-md-8 col-md-push-8" id="lgXbtvA">
<script src="http://cdnapi.kaltura.com/p/1982211/sp/198221100/embedIframeJs/uiconf_id/40685101/partner_id/1982211"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="kaltura_player_1507831819" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text</p>
</div>
<!--Videos Small -->
<div class="col-xs-12 col-md-4 col-md-pull-4 e" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="" />
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="" />
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
Edit: The columns appear in the proper order on the desktop view, they are just offset for reasons I can't explain.
When you used pull and push class in bootstrap used alternate column for that So that you need to used:
col-xs-8 col-md-8 col-md-push-4 instead of col-xs-12 col-md-8 col-md-push-8
and
col-xs-4 col-md-4 col-md-pull-8 instead of col-xs-12 col-md-4 col-md-pull-4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-8 col-md-8 col-md-push-4" id="lgXbtvA">
<script src="http://"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="player" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text text </p>
</div>
<!--Videos Small -->
<div class="col-xs-4 col-md-4 col-md-pull-8" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="">
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="">
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</div>
Update Demo Link
Your large video should be
class="col-xs-12 col-md-8 col-md-push-4"
and your small video should be
class="col-xs-12 col-md-4 col-md-pull-8"
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-9" style="background: gold;">
<div class="row">
<!-- Large Video -->
<div class="col-xs-12 col-md-8 col-md-push-4" id="lgXbtvA">
<script src="http://"></script>
<!-- Outer div defines maximum space the player can take -->
<div style="width: 100%;display: inline-block;position: relative;">
<!-- inner pusher div defines aspect ratio: in this case 16:9 ~ 56.25% -->
<div id="dummy" class="vignette" style="margin-top: 56.25%;"></div>
<!-- the player embed target, set to take up available absolute space -->
<div id="player" style="position:absolute;top:0;left:0;left: 0;right: 0;bottom:0;border:solid thin black;">
</div>
</div>
<h1>Large Headline</h1>
<div class="g citation">October 4, 2017 </div>
<p>Text text text text text text </p>
</div>
<!--Videos Small -->
<div class="col-xs-12 col-md-4 col-md-pull-8" style="background: red; padding: 0;">
<a href="#" class="c">
<div class="artblock">
<img src="images/650.jpg" alt="">
<div class="g">September 29, 2017</div>
<div>Saturday Stakes Preview Show</div>
</div>
</a>
<a href="#" class="c">
<div class="artblock">
<img src="images/xpress.jpg" alt="">
<div class="g">September 28, 2017</div>
<div>Breeders' Cup Xpress</div>
</div>
</a>
</div>
</div>
</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 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.
I am using this code in a page in bootstrap 3.
<div class="description_text">
<div class="row">
<!-- Sunny -->
<div class="col-md-2">
<div class="horizontal_center">
<img src="img/sunnylogo.png" alt="Sunny logo">
</div>
<div class="horizontal_center">
Sunny
</div>
</div>
<!-- End Sunny -->
<!-- Walking -->
<div class="col-md-2">
<div class="horizontal_center">
<img src="img/walkinglogo.png" alt="Walking logo">
</div>
<div class="horizontal_center">
Walking
</div>
</div>
<!-- End Walking -->
<!-- Windy -->
<div class="col-md-2">
<div class="horizontal_center">
<img src="img/windylogo.png" alt="Windy logo">
</div>
<div class="horizontal_center">
Windy
</div>
</div>
<!-- End Windy -->
<!-- Rain -->
<div class="col-md-2">
<div class="horizontal_center">
<img src="img/rainlogo.png" alt="Rain logo">
</div>
<div class="horizontal_center">
Rain
</div>
</div>
<!-- End Rain -->
<!-- Snow -->
<div class="col-md-2">
<div class="horizontal_center">
<img src="img/snowlogo.png" alt="Snow logo">
</div>
<div class="horizontal_center">
Snow
</div>
</div>
<!-- Snow -->
</div>
</div>
When window is full screen, it is OK.
But if I make it small, it making problem.
It goes to vertically.
I want to stop this property of bootstrap in this page.
Can anyone please help me?
Thanks in advance for helping.
You can use more then one class according to resolution
col-md-2 Medium devices Desktops (≥992px)
col-sm-2 Small devices Tablets (≥768px)
col-xs-2 Extra small devices Phones (<768px)
Use
<div class="col-md-2 col-sm-2 col-xs-2"></div>
Simply don't use bootstrap's col-md-x and row classes. Make your own divs and style them by yourself.
Or you could style the col-md-2 class like so:
.col-md-2{
float: left;
}