Hello sir i wanna change the header section of posts page and want them to look like collection page featured image background. let me explain in detail.
This is the collection page URL with featured image. https://shoeslik.myshopify.com/collections/all
in this page featured image shown as background of title.
Here is the news post page. https://shoeslik.myshopify.com/blogs/news/ways-to-select-shoes-to-wear-with-an-outfit
feature image is already set but i want to edit some code to make the header look like above collection page.
and i am using Debut theme.
One more thing to add i have seen that the collection page feature background image height is 300px but i want the news posts background image size 400px.
here is what i have done so far
<div data-section-id="{{ section.id }}" data-section-type="collection-template">
<header class="collection-header">
<div class="collection-hero">
<div class="collection-hero__image ratio-container lazyload js"
data-bgset="{% include 'bgset', image: collection.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-image: url('{{ article.image | img_url: '300x300' }});"></div>
<noscript>
<div class="collection-hero__image" style="background-image: url({{ article.image | img_url: '2048x600', crop: 'top' }});"></div>
</noscript>
<div class="collection-hero__title-wrapper">
<h1 class="collection-hero__title page-width">{{ article.title }}</h1>
</div>
</div>
above code is the collection page so i copy it and its scss is already used with other div also and i change it little to fit needs. but i can't actually able to do exactly look like collection page. I also can't able to add author name and publish date in background area. You may check the links and can guide me what to do.
Waiting for your kind help.
thanks
Well now this question is solved while adding some css like this.
body.template-article article.page-width {
padding-left: 0px;
padding-right: 0px;
margin: 0px;
width: 100% !important;
max-width: 100% !important;
}
body.template-article .collection-hero__image {
height: 400px;
}
.section-header.text-center.blogs-heders+.collection-hero__image:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #685858;
opacity: 0.4;
}
My PWA in a desktop browser is not really cool (because i don't have a lot of information to show).
And I would like to limit the width to 768px.
I tried many solutions, but i can't to change elements in position "fixed" like v-navigation, v-footer, v-dialog, ...
they are always 100% of the width of the browser.
I tried this in app.vue or in index.html:
html,body,#app {
max-width:768px !important;
overflow: hidden;
}
and last time I tried this in index.html:
#mytable {
width: 100%;
overflow: hidden;
}
#mytable td{
width:50%
}
<table id="mytable">
<tr>
<td>
<div id="app"></div>
</td>
<td>other half</td>
</tr>
</table>
But no solutions works.
Thanks for your help
Marco
Your problem seems you need different layout in function of screen size. You have several solutions from media queries to simple margin. Here I will explain how to do what you want with just margin.
I advise you to use a div to wrap your content and do not apply all your style in your #app container. Why ? Because you can imagine for instance that you want a top bar that take all the width and a content that take only 768px. If you make your layout in only one block this will be very complex. Separation in several block is a good strategy to have a modulabe UI. So we will use this template. You can make whatever you want in the .content div.
<div id="app">
<!-- Here we can imagine a top bar -->
<div class="content">
<!-- Display whatever you want -->
</div>
</div>
First you need to prepare your app container to display your application in all screen. I suggest this css :
html,body,#app {
overflow: hidden; // If content is large it will display scroll bar
height: 100vh; // Tell to your browser to take 100% of the available viewport height
}
Then you can define the css of the .content block :
.content {
max-width: 768px; // Max-width you want
height: 100%; // Take all the height available
margin: 0 auto; // Display div at the center
}
Here is an example: jsFiddle
If you are very interested in layout design, I strongly advise you to look into flex box and css grid.
I am using the skroller on a page. The page on mobile devices is showing a large space which is not scrollable after first time you scroll it. Visited so many websites offering solution, including StackOverflow and #Prinzhorn's own comments on the same, but some how I am unable to fix the problem on mobile devices (Android, iPhone).
Here is HTML:
<div id="skrollr-body">
<div id="eidwish1" class="centered" data-300="width:100%; background-image:linear-gradient(0deg, hsl(0, 100%, 50%), hsl(40, 50%, 50%));" data-2000="width:0%; background-image:linear-gradient(3600deg, hsl(360, 100%, 50%), hsl(400, 100%, 50%));"><h1 class="text-center heading2 wow fadeInDown" data-0="display:block;" data-1500="display:none;">This Eid send your loved ones...</h1></div>
<div id="eidwish2" class="centered" data-2000="width:100%;" data-2500="width:0%;"><h1 class="text-center heading2 wow fadeInUp" data-0="background-image:linear-gradient(0deg, hsl(0, 100%, 50%), hsl(40, 50%, 50%));" data-2500="background-image:linear-gradient(3600deg, hsl(360, 100%, 50%), hsl(400, 100%, 50%));">a personalized Greeting Card!</h1>
<div id="crescent" class="centered" data-1500="top:-100px;" data-2000="top:-200px;"></div>
</div>
<div id="ribbon-left" class="ribbon" data-2500="width:0%;" data-3500="width:50%;"></div>
<div id="ribbon-right" class="ribbon" data-2500="width:0%;" data-3500="width:50%;"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="337px" height="200px">
</svg>
<div id="pattern1" class="centered" data-2500=" height:100%; "data-3500="height:0%;"></div>
<div id="pattern2" class="centered"></div>
<div id="eidwish3" class="centered" data-4000="width:0px;height:0px; "data-5000="width:700px;height:700px;"></div>
<h1 class="text-center headerUp wow lightSpeedIn" data-0="display:none;" data-4000="display:block;"><img src="logo.png" alt="logo"/><span clss="toggle-green">THINK GREEN </span><span class="toggle-blue">PRINT GREEN</span></br><small><i>use "EID-2015" promo code when you checkout</i></small></h1>
<h1 class="text-center discount wow rollIn" data-0="display:none;" data-4000="display:block;">We are Giving Away 25% discount</h1>
<a class="button btn-success buy-now text-center wow jello" data-wow-iteration="10" data-wow-duration="3000ms" data-0="display:none;" data-4000="display:block;" href="Greeting Cards">See All Card Designs</a>
<a class="copyright" href="http://example.com">
<img src="http://example.com/logo.png" alt="logo"/>
<br>Copyright © example.com 2015-16</a>
</div>
This is JS:
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript">
var s = skrollr.init({
forceHeight: false
});
and CSS:
html, body {padding:0;margin:0;
k}
body {overflow:auto; height:7600px;
}
#skrollr-body {min-height: 1px; float: left; width:100%; height:100%;
}
#skrollrk-body div {overflow:hidden; position:absolute;
}
.centered { top:0; bottom:0; left:0; right:0; margin:auto;
}
#eidwish1 {background: #000 center center no-repeat ; z-index:5;
}
#eidwish2 {background: #000 url('wish2.png') center bottom no-repeat ; z-index:4; box-shadow: 0 0 0 20px #FF0000; background-size: cover;
}
#crescent {width:100%; background:url('crescent2.png') no-repeat; margin-top:0px;
}
#pattern1 { background:url('wish3.jpg') ; z-index:2; background-attachment:fixed; background-size: cover;
}
.ribbon {background:#FF0000; height:40px; top:50%; margin-top:-20px; z-index:3;}
#ribbon-left {left:0
}
#ribbon-right {right:0
}
small { color: #fff;
}
svg {position:absolute; z-index:5; left:50%; top:50%; margin-left:-170px; margin-top:-180px
}
#pattern2 { background:url('wish4.jpg'); z-index:1; background-size: cover
}
#eidwish3 {background:#FF0000 url('wish5.jpg') no-repeat center center; z-index:10; border-radius:50%; background-size: cover
}
I am stuck on this for many days. I have read almost every thread about this and tried to do the same, but it doesn't solve my problem. Pleas help!
I'm exactly with you on this topic. Oh how I wish I could talk to somebody about skrollr. Here's a few things I've learned about Skrollr and Mobile:
You need to really understand the differences between mobile browser and desktop.
Of special note is Mobile Layout Viewport vs Visual Viewport. I'd start here http://www.quirksmode.org/mobile/viewports.html, and here http://www.quirksmode.org/mobile/viewports2.html
However, the CSS layout, especially percentual widths, are calculated
relative to the layout viewport, which is considerably wider than the
visual viewport.Thus the element takes the width of the layout
viewport initially, and your CSS is interpreted as if the screen were
significantly wider than the phone screen. This makes sure that your
site’s layout behaves as it does on a desktop browser.
How wide is the layout viewport? That differs per browser. Safari
iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.
This is a pretty big deal. If for you both desktop and mobile Layout / Visual Viewports are same size, then you can make your website essentially functional in mobile using the touch system. It will look and function pretty much just like desktop scrolling.
If those viewports are hugely different widths, its a no go. I had a website controlled fully by heights, so I was out of luck. I ended up adding a few 'static' screens to the bottom of my page. I added two classes (.my_website_mobile and .my_website_desktop) I would display: block; or display: none; as appropriate. I wasn't happy doing that but it worked.
In mobile, a div with a background-image can not have background-position: fixed That will work great on a desktop browser mobile emulator tool but will fail terribly on a real mobile device. (hard lesson learned...)
Other functions likely to have odd performance on mobile: overflow, and visual viewport I used a lot of vw (Viewport Width) and vh (Viewport Height) heights instead of % for locations and sizes. Those make sense on desktop, not so on mobile.
Reminder, skrollr-body gets style="-webkit-transform: translate(0px, 0px) translateZ(0px); transform: translate(0px, 0px) translateZ(0px);" upon skrollr initialization.
If you are on a mobile device, then: <html class="skrollr skrollr-mobile" style="overflow: hidden;" > and <body style="overflow: hidden;"> after skrollr initialization.
If you are on a desktop device, then: <html class="skrollr skrollr-desktop"> and <body style="height: 12345px;"> after skrollr initialization.
I haven't dug into your specific code, but if you want to talk more, contact me via email (check my profile...) I'm totally up for it. I need to change machines and my location before I am able to troubleshoot your code...
Hey I have a little problem I have a full page header but when I zoom in or reduce the screen size and slide along. It is not full page width it just leaves white space. May css code goes a follow.
.header {
background:#242424 repeat-x;
color:#ffffff;
width:100%;
height:74px;
font-family: 'Karla', cursive;
font-weight:bold;
font-size:15px;
}
The problem is caused by your <div class="medium-cont"></div> tag.
You are setting its width to 1400px in CSS which is causing the problem.
You don't need to use this element, instead set the background image of .medium-back.
<div class="medium-back">
<div class="register"></div>
<div class="medium-cont"></div> <!-- Remove this line -->
</div>
Change your .medium-back style to this:
.medium-back {
background: #19D89B url(images/medium-content.png) no-repeat;
height: 475px;
margin: 0 auto;
}
Then remove any other width:100%; styles you have on the outermost elements.
I'm trying to create a website with a background-size:100% 100% css rule. It's an image that sits behind the content and is designed in such a way that no matter the dimensions of the browser window it still works well.
I think the rule I have (as below) is clashing with Blueprint somehow.
body {
background:url('../img/bg.jpg') no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
}
This should generate a perfect 100% background image, however, the results I'm getting is that the background finishes where the content finishes, regardless of the browser window size.
Here are two images of what I want and what I'm getting:
EXPECTED
WHAT I'M GETTING (regardless of browser size)
Please help me, I'm not sure how to proceed with this.
Here is my HTML setup for the page:
<body>
<div class="container">
<div id="navbar" class="span-6 last">
<div id="logo" class="span-6 last"></div>
<div id="menu">
<ul>
<li class="menu-current">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="content" class="span-18 last">
</div>
</div>
</body>
If the container is 550px high then the background ends 550px down the page with an empty white space beneath that area.
I was able to replicate the effect on JSFiddle:
http://jsfiddle.net/danhanly/TurW5/4/
Would be nice if you can show us your HTML and CSS that way maybe I can pin point what your doing wrong.
You can write.
html {height:100%}
body {background:url('/image.jpg') no-repeat center}
#container {
margin:20px auto;
width:960px;
overflow:hidden}
Adding a min-height to the body that is equal to the height of the background-image will ensure that the body is large enough to display the entire background.