I'm trying to use bootstrap grid to format my webpage layout. There are two elements on my page, an image and a subtitle for the image. I would like that both elements occupy the whole screen of a smartphone, just under the navbar. Could anyone help me? I'm also tryint to make it looks nice on pc and other plataforms.
I have done some progress using media screen, but its still clunky.
Thats my .index html:
<div class="row">
<div class="combocontainer col-lg-12">
<div class="combocontainer">
<div class="top-container">
<img class="avatar" src="Images/minimalist.jpg" alt="avatar" />
</div>
<div class="signature">
<h1>My Name</h1>
</div>
</div>
</div>
</div>
Thats my css:
.avatar {
display: block;
margin-top: 220px;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.combocontainer{
height: 100vh;
}
#media screen and (min-width: 1000px) {
.combocontainer {
display: block;
margin-top: 6rem;
margin-left: auto;
margin-right: auto;
height: 20%;
width: 20%;
}
}
/* No implementation yet */
.signature {
text-align: center;
height: 20%;
width: 20%;
font-family: "romatehood-p73ed-webfont";
}
Related
I have a section on a site that I have multiple image blocks. I have two columns with multiple rows. For some reason the margin and width are not being applied to these images. I have the following code in my media query for a viewport of 640px or less. Whenever you drag the corner of the page, the images do not scale in size at all. Also the left images stay in place instead of moving with the margin.
It is under the part called Site Sponsors in a viewport of 640px or less.
What is causing the images to not scale in height and width as well as the margin?
As you can see I have the images width defined in a percentage basis:
.b_250 img {
width: 55%;
height: auto;
}
.b_250 iframe {
width: 55%;
height: auto;
}
As well as the margin defined:
.sponsors {
width: 100%;
margin: 0 2.5%;
}
Does anyone see what I am doing wrong?
<div id="sponsor-left">
<div class="b_250">
<img src="images/Contractor Images/PMC spray foam equipment for sale.jpg">
</div>
<div class="b_250">
<img src="images/Contractor Images/Green Insulation Technology 300x200.jpg">
</div>
<div class="b_250">
<img src="images/Contractor Images/Spray foam rigs for sale a series.jpg">
</div>
</div>
<div id="sponsor-right">
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
<div class="b_250">
<img src="images/Ad Boxes/300x200.gif" alt="">
</div>
</div>
.container {
width: 100%;
}
.content {
float: none;
text-align: center;
width: 100%;
}
/*----Second to Last Homepage Article---*/
#latestnews {
width: 100%;
text-align: center;
}
#latestnews .latestnews h2{
margin: 10px 5%;
font-size: 1.3em;
width: 90%;
}
#latestnews ul, #latestnews li{
text-align: center;
}
#latestnews li{
margin: 0 auto;
}
.latestnews img{
margin: 0 auto;
text-align: center;
}
#latestnews div.latestnews{
float:none;
width: 100%;
}
#latestnews p {
padding: 20px 10px;
clear: both;
}
#latestnews p.readmore{margin-top:10px; text-align:center;}
.column .sponsors {
width: 100%;
}
.column {
clear: both;
width: 100%;
margin: 0 auto;
}
.column .sponsors .b_250{
border: none;
}
.b_250 img {
width: 55%;
height: auto;
}
.b_250 iframe {
width: 55%;
height: auto;
}
.sponsors {
width: 100%;
margin: 0 2.5%;
}
.sponsors h2{
margin: 10px 5%;
font-size: 1.3em;
width: 90%;
text-align: center;
}
#sponsor-left {
float: left;
width: 45%;
}
#sponsor-right {
float: right;
width: 45%;
}
}
To center the ads, add this(although I prefer to avoid using ID's in selectors):
#sponsor-left a > img { margin: 0 auto; }
At which point you can then increase the width of the images to 100% to fill the width you declared for the left and right columns.
Also as I noted in the comments remove the float: right; and change to display: inline-block;
try display:block max-width:100%; height:auto;
for image to be center
You must use display:block or display:inline-block by default image is display:inline
How to center?
if your image is display:block use margin-left:auto; and margin-right:auto;
and for display:inline-block give text-align:center to image parent element
Note
Be care full your image css does not have float:left or float:right
I can't seem to find a solution for this anywhere.
I have a page with three elements displayed via flex: header, container and footer. The header and footer contain just what they need to, but container must take up all space left in the window. This is achieved via flex properties.
I would like to insert a Slick Carousel and have it contained the same way you can contain an image as a background (but with img tags, for semantics).
You can see example code here:
<html>
<head>
<title>Manuel del Pozo | Interiorismo & Diseño</title>
</head>
<body>
<div class="flex-container">
<header>
<div class="links">
<div class="lang-selector">
EN
/ ES
/ PT
</div>
<div class="social-links">
Fb
Tw
Ig
</div>
<div class="clearfix"></div>
</div>
<div class="logo-header">
<h1>Manuel del Pozo</h1>
<h2>Interiorismo & Diseño</h2>
</div>
<nav>
Home
Estudio
Proyectos
Servicios
About Me
Contacto
</nav>
</header>
<div class="container">
<div class="carousel">
<img src="http://www.manueldelpozoid.com/root/img/portfolio/01.jpg" alt="Portfolio Image 01">
</div>
</div>
<footer>
<div class="philo">
<p>Creamos un espacio hecho a tu medida, adaptándolo a tus gustos y necesidades</p>
</div>
<div class="footer-contact">
manuel#fake.com
<p> | </p>
<p>Tlf.: XXX XXX XXX</p>
</div>
</footer>
</div><!-- end of flex-container -->
</body>
</html>
http://codepen.io/anon/pen/MaRPop?editors=110
It does not have the carousel, just an image to make this easier.
Thanks!
Not exactly sure what you need, so try adding the following CSS to your style.css and see if I'm close.
CSS
/*******************************************************************************
GENERAL
*******************************************************************************/
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
max-width: 100%;
max-height: 100%;
font-family: 'Courier', serif;
}
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*******************************************************************************
FLEX DISPLAY SETTINGS
*******************************************************************************/
.flex-container {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-content: center;
align-items: center;
width: 100%;
height: 100%;
max-height: 100%;
padding: 20px;
overflow-y: auto;
overflow-x: hidden;
}
.flex-container header {
flex: 0 0 15vh;
position: fixed;
top: 0;
height: 15vh;
width: 100%;
}
.flex-container .container {
flex: 1 0 70vh;
width: 100%;
height: calc(100% - 30vh);
overflow-y: auto;
overflow-x: hidden;
position: absolute;
top: calc(100% - 30vh);
}
.flex-container footer {
flex: 0 0 15vh;
position: fixed;
bottom: 0;
height: 15vh;
width: 100%;
}
Using zer00ne CSS, I put a fixed height for both header and footer and then used a calculation for the container "100vh - (header+footer)". Then asigning 100% height to all elements until the img, which I put with object-fit:contain;
That fixed it for me
I have a three column layout where the logo at browser view is to the left, one word is in the middle, and the nav menu is to the right. This is fine at full browser.
When it is resized to mid or mobile view the columns are not clearing and stacking correctly.
Here is what I am getting right now at full view: http://postimg.org/image/wvfl1hkut/
Here is what needs fixed at mobile and mid view: http://postimg.org/image/sa1nvyw8j/
Here is my code:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="row">
<div class="header">
<div class="col-xs-6 col-sm-4">
<a href="{{ URL::route('home') }}">
<div class="header_group">
<img src="../../images/logo.png">
</div><!--header group -->
</a>
</div>
<div class="col-xs-6 col-sm-3"></div>
<div class="col-xs-6 col-sm-4">
<p> </p>
</div>
<div class="col-xs-6 col-sm-4">
#include('layout.navigation')
</div>
</div><!-- main header -->
</div><!-- row -->
</div>
</div>
External CSS sheet
.header {
width: 100%;
height: auto;
margin: 0 auto;
background: red;
}
.header_group {
background-color: none;
width: 100%;
height: auto;
display: inline-table;
font-size: 1.5em;
font-weight: 400;
font-family: 'Roboto', sans-serif;
color: #f0fff0;
clear: none;
margin-top: 5%;
}
.header_text {
vertical-align: middle;
display: inline;
text-align: center;
color: #f05152;
}
.nav {
width: auto;
height: auto;
margin-top: 12%;
}
.nav a {
color: #000;
padding-left: 10%;
margin-left: 4%;
}
.navbar {
width: 100%;
height: 20%;
padding-top: 0;
}
.wrapper {
width: 100%;
height: 500px;
background: url(../../../images/yellow.png) repeat,
}
Bootstrap has a 12 column grid. Each set of 12 columns should be contained in a .row.
Your code has 4 .col-xs-6 columns, which total 24 columns. It also has 3 .col-sm-4 and 1 .col-sm-3 columns, which total 15 columns.
If you place the columns in their correct rows of 12 then they will clearfix correctly.
FYI: From the documentation...
Content should be placed within columns, and only columns may be immediate children of rows.
Move .header.
html code:
<div class="container">
<a class="ank">
<img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
</a>
</div>
css code:
.ank
{
display: block;
width: 500px;
height: 500px;
line-height: 100%;
}
img
{
vertical-align: middle;
}
.container
{
display:block;
width: 500px;
height: 500px;
border: 1px solid black;
font-size: 500px;
}
jsfiddle: http://jsfiddle.net/mfBZZ/5/
if i change the jsfiddle, so that anks line-height is 500px, and remove the font-size from container, it works.
but when i add the font-size to container of 500px, and then make the line-height in ank, 100% of that font-size, it doesn't work. it brings the image alittle lower than where it should be.
working jsfiddle: http://jsfiddle.net/eujFY/1/
UPDATE:
this solution works for me:
http://jsfiddle.net/eujFY/2/ <---- updated.
I've seen you found a solution, however it implies setting the height manually on both elements and it requires the usage of unnecessary tags.
So I suggest you to check the "display:table" (container) and "display:table-cell" (inner element) rules: http://jsfiddle.net/RxGS5/
HTML
<div class="container">
<a class="ank">
<img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
</a>
</div>
CSS
.container
{
display:table;
width: 500px;
height: 500px;
border: 1px solid black;
}
.ank
{
display: table-cell;
vertical-align: middle;
}
I have an awkward visual glitch. I want a nice transition when changing pages on an app.
Unfortunately, the first time I change to another page, instead of sliding the current page out and the new page in, the current page is immediately replaced by the new page and then slides out. When the first page is out of view, the new page is shown. However, the second time around, it works like a charm!
This is running on iphone with jQuery Mobile + PhoneGap
I made a video to help clarify the issue: http://www.youtube.com/watch?v=Ybvzh_wTnSE
<body style="background-color: #000;">
<div id="container" style="display:none;">
<div id="side-menu" style="display:none;">
<div id="header_top"></div>
<div id="header_dives" class="selected"></div>
<div id="header_spacer1"></div>
<div id="header_explore"></div>
<div id="header_spacer2"></div>
<div id="header_search"></div>
<div id="header_spacer3"></div>
<div id="header_settings"></div>
<div id="header_bottom"></div>
</div>
<div id="slide_mask">
<!-- START of LOGIN page -->
<div data-role="page" id="login">
<div id="home_frame">
<div id="home_logo"></div>
<div id="home_fblogin" onclick="login()"></div>
<div class="home_login">
<p>Email: <input type="text" name="user[email]" size="30"/></p>
<p>Password: <input type="password" name="user[password]" size="30"/></p>
<button onclick="show_page_home();">LOGIN</button>
</div>
</div>
</div>
<!-- END of LOGIN page -->
<!-- START of LOGIN page -->
<div data-role="page" id="dives" class="right_pane">
<p>My dives !</p>
</div><!-- /content -->
<div data-role="page" id="explore" class="hidden right_pane">
<p>My explore !</p>
</div><!-- /content -->
<div data-role="page" id="search" class="hidden right_pane">
<p>My search !</p>
</div><!-- /content -->
<div data-role="page" id="settings" class="hidden right_pane">
<p>My settings !</p>
<button onclick="logout_db();">logout</button>
</div><!-- /content -->
<!-- END of LOGIN page -->
</div>
</div>
<div id="log"></div>
<div id="data"></div>
</body>
And the relevant CSS:
body {margin: 0; font: 18px Helvetica; text-align: center; background-color: #000; background: url(../img/bg_big.png) repeat;
-webkit-user-select: none; /* prevent copy paste for all elements */
}
#container { width:320px; height:460px; overflow: hidden;}
input{ -webkit-user-select: text; /* enable copy paste for elements with this class */}
a {-webkit-user-select: none; /* prevent copy paste for all elements */}
span {-webkit-user-select: none; /* prevent copy paste for all elements */}
#side-menu {z-index: 1000 !important; position: fixed; height: 460px; width: 56.5px; background: url(../img/bg_big.png) no-repeat; display: inline-block;
overflow: hidden; top: 0px; left: 0px; }
#header_top {background: url(../img/header/header_top.png) no-repeat; background-size: 56.5px 48.96px; width: 56.5px; height: 48.96px; display: block;}
#header_dives {background: url(../img/header/dives.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_dives.selected{background: url(../img/header/dives_selected.png) no-repeat;}
#header_spacer1{background: url(../img/header/header_space1.png) no-repeat; background-size: 56.5px 13.9px; width: 56.5px; height: 13.9px; display: block;}
#header_explore{background: url(../img/header/explore.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_explore.selected{background: url(../img/header/explore_selected.png) no-repeat;}
#header_spacer2{background: url(../img/header/header_space2.png) no-repeat; background-size: 56.5px 15.33px; width: 56.5px; height: 15.33px; display: block;}
#header_search{background: url(../img/header/search.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_search.selected{background: url(../img/header/search_selected.png) no-repeat;}
#header_spacer3{background: url(../img/header/header_space3.png) no-repeat; background-size: 56.5px 17.73px; width: 56.5px; height: 17.73px; display: block;}
#header_settings{background: url(../img/header/settings.png) no-repeat; background-size: 56.5px 51.75px; width: 56.5px; height: 51.75px; display: block;}
#header_settings.selected{background: url(../img/header/settings_selected.png) no-repeat;}
#header_bottom{background: url(../img/header/header_bottom.png) no-repeat; background-size: 56.5px 160px; width: 56.5px; height: 160px; display: block;}
.hidden {display: none;}
.right_pane{width: 263.5px !important; background: url(../img/right_bg.png) no-repeat; background-size:263.5px 460px; width: 263.5px; height: 460px; left: 56.5px !important;}
#slide_mask{ display: inline-block; overflow: hidden; padding-left: 56.5px; width: 263.5px; height: 460px; top: 0;}
and the bit of JS:
///////////////////////////////////
//MENU MECHANICS
///////////////////////////////////
function showdives(){
$("#side-menu .selected").removeClass("selected");
$("#header_dives").addClass("selected");
}
function showexplore(){
$("#side-menu .selected").removeClass("selected");
$("#header_explore").addClass("selected");
}
function showsearch(){
$("#side-menu .selected").removeClass("selected");
$("#header_search").addClass("selected");
}
function showsettings(){
$("#side-menu .selected").removeClass("selected");
$("#header_settings").addClass("selected");
}
The onclick methods only add/remove the "selected" class to/from the menu items.
I believe people refer to this as "flickering", so you'll have better results when you search for that. After looking around, it looks like your problem is common on android and can be solved by adding the following CSS:
.ui-page {
-webkit-backface-visibility: hidden;
}
Here are a few references:
http://blogs.bytecode.com.au/glen/2011/07/14/eliminating-annoying-flicker-transitions-with.html
Flickering when navigating between pages
https://forum.jquery.com/topic/performance-of-jquery-mobile-on-android-2-2-and-2-3-flickering
I and my friends are using JQuery 1.2.
The way to solve this issue was to put data-transition="none". Maybe this cannot appear mobile
style that much, but works and delete the flickering problem.
Hope this help.
I had the same problem, but even worse, when wrapping a Jquery mobile app in Phonegap. Not only were the page transitions flickering, but the UI was completely broken. I used Jquery 1.8 and Jquery mobile 1.2 in this app.
I have tried most of the solutions suggested here on SO, but nothing worked. Then I found this solution by Piotr Walczyszyn, and everything worked like a dream! Highly recommended for anyone using Jquery mobile and Phonegap together.