I have a small website using Bootstrap 3.0 RC1 and I am just trying to center a simple image (with responsive rendering)
So everything seems to work on desktop devices, but when I look at my website on a small device like a mobile, the image is resized (thats good) but NOT perfectly centered.....
I am puzzled..
Any idea?
Many thanks in advance,
I use the following code :
<body style="display: block;">
<section class="container">
<header>
<div class="row">
<div class="col-lg-6 col-offset-3">
<center><img src="img/grey_wash_wall.png" class="text-center" title="Hello" alt="World"></center>
</div>
</div>
<div class="row">
<div class="title col-lg-12">
<h1>Welcome to my website</h1>
</div>
</div>
</header>
You're missing a closing bracket on your .container CSS.
.container {
max-width: 700px;
background:white;
padding: 30px 50px;
margin: 20px auto;
text-align: center;
}
EDIT:
I'm unable to replicate this behavior on a mobile-sized browser window using the markup you provided. jsFiddle
Related
I know little about Laravel and Masonry grid layout, but I know how Bootstrap framework works.
I need to change the number of columns in a Boostrap grid for small size devices like a mobile phone. Currently, the number of columns is 3 because the class used is col-xs-4. However, I need to change it to col-xs-6, so that it shows 2 columns.
I don't think it's that hard, but I don't know how Laravel works.
I tried searching for those divs in the whole project so that I could directly change those classes, but I couldn't find anything.
This is an example of one column in a row:
<div class="container-fluid">
<div class="row">
<div class="fw-divider-space hidden-below-xl pt-70"></div>
<div class="col-lg-12">
<div data-animation="fadeInDown" class="row isotope-wrapper masonry-layout c-gutter-5 c-mb-5 animate animated fadeInDown" style="position: relative; height: 798px;">
<div class="col-sm-3 col-lg-3 col-lgx-3 col-xl-3 col-xs-4 col-4" style="position: absolute; left: 0%; top: 0px;">
<div class="vertical-item item-gallery content-absolute text-center ds">
<a href="https://www.tusencuentros.cl/modelo/9/ver" class="item-media h-100 w-100 d-block"><img src="https://www.tusencuentros.cl/storage/fotos_perfil/9-1.jpg" alt="Modelo">
<div class="media-links"></div>
</a>
<img src="https://clubvip.cl/storage/watsapp_logo.png" style="width: 40px; height: 40px; margin-top: 5px;"> <i aria-hidden="true" class="fa fa-phone-square" style="font-size: 36px; color: rgb(255, 255, 255); float: right;"></i>
<div class="item-content" style="background-color: rgb(233, 11, 165);">
<div class="item-title" style="top: -80px; width: 100%;">
<div style="display: inline-flex;">
<p style="font-size: 14px;">CARLITA </p>
</div>
<div>
<p style="font-size: 12px;">CHILENA, 20</p>
</div>
<div>
<p style="font-size: 10px;">Medidas: 94-62-98</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I expect the classes col-xs-4 to be col-xs-6.
I assume you use laravel blade
You can use dynamic css class in here like
class="col-sm-3 col-lg-3 col-lgx-3 col-xl-3 {{ $isMobile ? 'col-xs-6' : 'col-xs-4' }} col-4"
In the curly blackets : is this mobile device? if yes, I will use col-xs-6 if not I will use col-xs-4
But you need to send the checking of $isMobile from your controller and there is a very simple component for that here jenssegers/agent
After installation you can perform check for mobile device by using $agent->isMobile() method
Finally I could fix it by finding out that the folder with the file that contains those divs was inside a non-public location called "resources". Since I know little about Laravel Blade, I didn't know the directory structure.
I am building a complex page with multiple sections based on the latest fullpage.js release (developer license). I have 3 full-height sections with auto scroll and then 3 more sub-sections. In the code it basically looks like this:
<div id="fullpage">
<div class="section">content</div>
<div class="section">content</div>
<div class="section">content</div>
...
<div class="section sub-section">content</div>
<div class="section sub-section">content</div>
<div class="section sub-section">content</div>
</div>
I want these sub-sections to have a normal scroll, is this possible?
Not something fullPage.js provides yet.
The most you can do is include all those last sections inside the last section of your site and then use scrollOverflow:true to emulate the normal scroll behaviour as in this example.
See this demo online
<div id="fullpage">
<div class="section">content</div>
<div class="section">content</div>
<div class="section">content</div>
<div class="section">
<div class="sub-section">sub content</div>
<div class="sub-section">sub content</div>
<div class="sub-section">sub content</div>
</div>
</div>
Using something like this:
sub-section{
height: 100vh;
width: 100%;
}
.sub-section{
background: red;
}
.sub-section:nth-child(1){
background: red;
}
.sub-section:nth-child(2){
background: blue;
}
<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet"/>
<div style="background: #eaeaea">
<div class="column row">
<div class="m-modal-video__column m-modal-video__column--primary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter"><h3 style="color: black; text-align: center;">Be Part of It</h3>
<p style="color: black; text-align: center;">Choose an innovative degree that has been designed with your employability at its core.</p>
</div>
</div>
</div>
<div class="m-modal-video__column m-modal-video__column--secondary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter">
<div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
<a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
<div class="m-modal-video__overlay m-modal-video__overlay--triangle">
<div class="m-modal-video m-modal-video__triangle"></div>
</div></a>
</div>
<div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
<div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
I've got a modal on my site, and use the following to display a thumbnail image:
http://img.youtube.com/vi/DxwrdB7A6-I/maxresdefault.jpg
The problem is the video has an aspect ratio of 21:9. I've used the following styles, but still get the black letterbox on both the top and bottom of the image. Is there a way to just display the YouTube thumbnail without the black letterbox?
&__container {
position: relative;
height: 0;
padding-bottom: 42.85714%;
overflow: hidden;
margin-bottom: 1rem;
a img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
I've modified your sample code to add two new CSS rules to correspond to a class your HTML already had with no styles:
.m-modal-video__container--cinemascope defines the container around your cinemascope-ratio image, using the padding-bottom trick you'd previously tried implementing.
.m-modal-video__container--cinemascope img defines the sizing and positioning of the image inside the above container. Knowing you want this image to maintain its aspect ratio and not stretch, I've removed the height: 100% rule (so the height is automatically calculated) and vertically centered the image with the top: 50% and transform: translateY(-50%) trick.
This is all needed because YouTube still produced a 16:9 JPG thumbnail for your video despite its 21:9 ratio, so we're essentially using this trick to hide the black bars in the image. I still see a tiny sliver poking through, but you slightly adjust your padding-bottom ratio if you were worried about that, or increase your img's width past 100%.
.m-modal-video__container--cinemascope {
position: relative;
height: 0;
padding-bottom: 42.85714%;
overflow: hidden;
}
.m-modal-video__container--cinemascope img {
position: absolute;
left: 0;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
<link href="https://www1.chester.ac.uk/sites/all/themes/global/css/app_chester.css" rel="stylesheet" />
<div style="background: #eaeaea">
<div class="column row">
<div class="m-modal-video__column m-modal-video__column--secondary">
<div class="m-modal-video m-modal-video--primary-full-width">
<div class="m-cta__vcenter">
<div class="m-modal-video__container m-modal-video__container--cinemascope" data-open="youtubemodal">
<a><img src="http://img.youtube.com/vi/Ily454tCpWE/maxresdefault.jpg">
<div class="m-modal-video__overlay m-modal-video__overlay--triangle">
<div class="m-modal-video m-modal-video__triangle"></div>
</div>
</a>
</div>
<div class="reveal large" id="youtubemodal" data-reveal data-reset-on-close="true">
<div class="m-video m-video--modal m-video--cinemascope"><iframe src="https://www.youtube.com/embed/Ily454tCpWE" frameborder="0" allowfullscreen=""></iframe></div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
I'm using Foundation4 as my framework and I want fadein animations to trigger when scrolling down. More like this website: www.isaacpvl.com . I have four divs and they're responsive if these information matters. Thanks to whoever answers! I already tried using firebug and I still can't find how. I'm a newbie when it comes to javascript.
Here are the codes I've done so far. It's just a mock-up to see how things would look like, not too much on the design yet.
<div class="row">
<div style="background-color: black;" id="head" class="large-12 columns">
</div>
</div>
<div class="row">
<div style="background-color: red;" id="section1" class="large-6 columns">
</div>
<div style="background-color: red;" id="section1" class="large-6 columns">
<img class="animated fadeInRight" src="img/hongkong/hongkongdragon.gif" />
</div>
</div>
<div class="row">
<div style="background-color: blue;" id="section2" class="large-12 columns">
</div>
</div>
that's the body so far and the css of the divs
.row.full-width { width: 100%; max-width: 100%; }
.row {min-width:100% !important; background-color: black;}
.section1{
/*background-image: url("../img/hongkong/background.png");*/
background-color:red;
position: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.section2{
/*background-image: url("../img/hongkong/background.png");*/
background-color: black;
position: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
As you can see there is an image source with the animated class, that's the image that I want to animate. It's a full-screen kind of website.
I'm using animate.css from http://daneden.me/animate/ btw
Can anyone help me how to match this element, I want to click Canada from the list of countries. Selenium (IDE/WebDriver) is not finding the element.
I have tried in Webdriver:
driver.FindElement(By.XPath(".//*[#class='slick-viewport']/*[#class='grid-canvas']/*[#class='ui-widget-content slick-row odd']/*[#class='slick-cell l1 r1 active selected']")).click();
Firepath gives this XPath:
.//*[#id='assetsTable']/div[5]/div/div[5]/div[2]
Neither of these are working. Obviously, I am not doing correctly. The ids are generated dynamically, and nested, so I'm finding it very difficult to work out. Can anyone have a look and tell me the correct way for the locator please?
Many thanks
PS: Looks like I am not allowed to upload image. So, copy pasted the content below:
<!DOCTYPE html>
<html class="dj_gecko dj_contentbox">
<head>
<body id="bodyID">
<div id="pageDiv" class="page">
<div id="header">
<div id="main">
<ul id="mainMenu" class="menuTab">
<div id="partialHost" style="height: 345.117px;">
<div id="assetsBreadcrumbDiv">
<div id="assetsGridDiv">
<ul id="assetMenu" class="menuTab">
<div id="assetsTable" class="defaultGrid slickgrid_109601 ui-widget" style="overflow: hidden; outline: 0px none; position: relative; height: 269.117px; width: 1562px;">
<div style="position:fixed;width:0;height:0;top:0;left:0;outline:0;" hidefocus="" tabindex="0"></div>
<div class="slick-header ui-state-default" style="overflow:hidden;position:relative;">
<div class="slick-headerrow ui-state-default" style="overflow: hidden; position: relative; display: none;">
<div class="slick-top-panel-scroller ui-state-default" style="overflow: hidden; position: relative; display: none;">
<div class="slick-viewport" style="width: 100%; overflow: auto; outline: 0px none; position: relative; height: 242px;">
<div class="grid-canvas" style="width: 1545px; height: 5975px;">
<div class="ui-widget-content slick-row odd" style="top:775px">
<div class="ui-widget-content slick-row even" style="top:800px">
<div class="ui-widget-content slick-row odd" style="top:825px">
<div class="ui-widget-content slick-row even" style="top:850px">
<div class="ui-widget-content slick-row odd" style="top:875px">
<div class="slick-cell l0 r0 selected">CA</div>
<div class="slick-cell l1 r1 active selected">CANADA</div>
<div class="slick-cell l2 r2 selected">Y</div>
<div class="slick-cell l3 r3 selected"></div>
<div class="slick-cell l4 r4 selected">CA</div>
</div>
<div class="ui-widget-content slick-row even" style="top:900px">
<div class="ui-widget-content slick-row odd" style="top:925px">
<div class="ui-widget-content slick-row even" style="top:950px">
//div[text()="CANADA"] should work. If you only want that particular element that is.
Don't use * , be explicit in XPath queries.
This works:
//div[#class='slick-cell l1 r1 active selected']
What do you get when you try your XPath query directly in FireBug?