I am modifying a joomla virtuemart template. I have added the banner image in a custom code block that I have placed in an existing module position. As such it has inherited some css properties around it that appear to be giving it padding. My banner should display the full width of the top menu bar (you can see it here: https://www.artisanbelle.com). I don't know how to remove the padding and fix the display. It has displayed the correct image, which is 1920px wide and when I had this same image displayed in the pre-existing slider, it fitted across the menu bar fine.
The code I have tried is below. Also this is the first time I am using srcset and sizes, so if I am doing anything wrong there, please let me know.
<div class='illustrationz'>
<img src='https://www.artisanbelle.com/images/stories/mainlg.jpg'
srcset='https://www.artisanbelle.com/images/stories/mainxsm.jpg 600w,
https://www.artisanbelle.com/images/stories/mainsm.jpg 960w,
https://www.artisanbelle.com/images/stories/mainmd.jpg 1280w,
https://www.artisanbelle.com/images/stories/mainlg.jpg 1920w'
sizes='(min-width: 600px) 960px, (min-width: 960px) 1280px, (min-width: 1280px) 1920px, 100vw'/>
</div>
</div>
.illustrationz img {
width: 100%;
display: block;
}
.sectionz {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}
.headerz {
height: auto;
justify-content: inherit;
align-items: inherit;
}
And this is the code that the template is wrapping this section in:
<div class="mod-slider-cont">
<div class="container">
<div class="inner-container">
<div class="custom"
And the template css that goes with it. I'm having trouble finding mod-slider-cont:
.vpf-topbar .inner-container {
border-bottom: 1px solid transparent;
padding: 5px 0;
margin-bottom: -1px;
}
#vpf-header .navbar .container .inner-container {
padding-bottom: 20px;
margin-bottom: -1px;
}
There's a bit of a formatting issue here, you could use this as a fix:
.illustrationz img {
width: 100vw; // Use viewport width here instead.
display: block;
}
Although I've seen it used like this, the sizes attribute is typically only used it rel=icon and you'd be better off using css media queries for this.
Related
i'm working on FCC Technical Documentation Page and i'm having an issue, i'm trying to make this project mobile responsive, but i'm running into an issue where I can't seem to figure out how to move my left fixed nav bar and transition it to a top nav bar that is center aligned at anything below 920px, if you can be of any help I would appreciate it. I will link the project below so anyone can look at the code.
EDIT Finished making the project mobile responsive, might not be the most efficient method but it worked as i'm learning, click the link to view the code to see what I did that worked.
https://codepen.io/ochovj/pen/eYvwmYr
#media screen and (max-width: 920px) {
.nav-ul {
position: relative;
top: 0;
margin: 0;
padding: 0;
text-align: center;
float: none;
}
}
/* End of Responsiveness */
/* Nav Bar Container */
#navbar {
position: fixed;
width: 290px;
height: 100%;
top: 0px;
left: 0px;
border: 2px solid black;
background-color: white;
padding: 50px 0;
}
The easiest way would be to make your navbar list display: flex at the desired breakpoint:
#media screen and (max-width: 920px) {
.nav-ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
display: flex alone should do roughly what you want, but flex-wrap: wrap allows multiple rows if your elements don't all fit on a single line and justify-content: center will center the <li> elements inside the <ul> parent.
The list elements will need more styling, like padding, as they'll just be squished in a row together -- but this will quickly fix your position issue.
I am new at HTML and CSS and I want to make a responsive header that contains:
logo picture with margin-left in pixels when full resolution
pogo picture must have it's full size when full resolution
navigation menu with 6 and width of 1500 when full resolution
No Bootstrap. What are your suggestion to accomplish that? What I have made so far is not responsive, on full size (width:1920px) measures are fine and it looks exactly how it should, but when I try to resize browser it is not in one row, even if I declare that div "inner" that contains them is width:100%, and both of them are also width:100%.
Code is something like this:
.inner{
width:100%;
}
.navigation {
display: inline-block;
float: right;
text-align: center;
padding-top:47px;
padding-bottom:27px;
max-width:1555px;
width:100%;
}
.navigation li{
display: inline-block;
width: 16%;
}
.navigation ul{
max-width: 1500px;
}
.wrapper-logo{
display: inline-block;
max-width:365px;
width:100%;
}
.small-logo{
max-width: 143px;
width:100%;
padding-left:220px;
}
<div class="inner">
<div class="logo-wrapper">
<div class="small-logo">
<img src="https://99designs-start-attachments.imgix.net/alchemy-pictures/2016%2F02%2F22%2F04%2F24%2F31%2Fb7bd820a-ecc0-4170-8f4e-3db2e73b0f4a%2F550250_artsigma.png?auto=format&ch=Width%2CDPR&w=250&h=250">
</div>
</div>
<div class="navigation">
<ul><li>......</li></ul>
</div>
</div>
Use media queries.
Here goes my Desktop resolution css
#media only screen and (max-width: 600px) {
/* Here goes my Mobile resolution css */
body {
background-color: lightblue;
}
}
You'll want something like the following for bullet 1
.small-logo {
margin-left: 10%;
}
#media only screen and (max-width: 600px) {
.small-logo {
margin-left: 0;
}
}
Bullet 2 I'm guessing should say Logo not Pogo. Based on the code provided .small-logo is your only logo so you'd do something like this.
.small-logo{
width: 100%
}
What does the navigation menu have 6 of? Columns? Buttons? Unicorns?
Set the inner class or preferably an id of the largest content div to the max I generally like to center the content and give some side white space so I put the basics in the comments.
.inner{
max-width: 1500px;
width: 100%;
/*width: 85%;
margin: auto 0;*/
}
Are you trying to have logo-wrapper and navigation horizontally aligned?
display: inline-block;
I am trying to code up a banner with a minimal amount of media queries, as in the past for header images and text, I can't figure out a way to use anything under 10.
My current issue:
I have a responsive background image that looks like this:
Header Image
However as the browser resizes, although the background image is being responsive, the container within the background div that houses the text is not resizing, therefore not keeping the text centered in the middle.
You can see something like this is happening:
Container overflowing
I've tried all kinds of things, heights on containers, removing heights. But all areas I end up getting to, I am having to do too many media queries to fix the text, or change the height of the image instead as the screen size goes down. I'd like to try and learn how to code a better header for this website that is more flexible and intuitive, that I can carry over too my future projects.
Here is the code HTML:
<section class="home_banner">
<?php
$featuredimage = get_the_post_thumbnail_url();
?>
<div class="banner_image" style="background-image: url('<?php echo $featuredimage; ?>'); ">
<div class="container">
<div class="banner_text_inner">
<p>Lorem Ipsum</p>
<div class="banner_excerpt">
<h1>Powerful engaging opening title</h1>
</div>
</div>
</div>
</div>
</section>
Here is the css:
.home_banner{
.banner_image {
background-size:100%;
height:100rem;
background-repeat: no-repeat;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
.banner_text_inner {
max-width: 1000px;
width: 100%;
margin: auto;
padding: 0 10px;
box-sizing: border-box;
font-family: $autumnchant;
font-size: 40px;
color: $color-primary;
#media (max-width: 1000px){
font-size: 30px;
p {
margin-bottom: 0;
}
}
#media (max-width: 400px){
font-size: 22px;
}
}
.banner_excerpt {
#media (max-width: 1000px){
h1 {
font-size: 40px;
}
}
#media (max-width: 400px){
h1 {
font-size: 30px;
line-height: 1;
letter-spacing: 5px;
margin-bottom: 0;
}
}
}
}
}
Try to add "background-size: cover;" to your banner-image and also add min-height.
I have a sidebar div that takes up 12% of the total screen width (set as a css property). I also have an <h1> block within this div, with a title. When I switch monitors to a smaller one, the sidebar ends up being skinnier, resulting in the title to extend OUT of the sidebar.
How can I format so that the text will always stay within the line? ("MY TI..." is fine for a result)
If the title text is known, you may be able to using viewport units vw for the font-size either in the original style or in the media queries.
You would also need to set the sidebar width to vw too, or a percentage value to make it all responsive.
html, body {
height: 100%;
margin: 0;
}
.sidebar {
border-right: solid;
height: 100%;
float: left;
width: 15vw;
}
.sidebar h1 {
font-size: 4vw;
text-align: center;
}
<div class="sidebar">
<h1>MyTitle</h1>
</div>
jsFiddle
Another solution would be using CSS ellipses, replace the overflow text with "...".
html, body {
height: 100%;
margin: 0;
}
.sidebar {
border-right: solid;
height: 100%;
width: 15%;
float: left;
}
.sidebar h1 {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="sidebar">
<h1>MyTitle MyTitle MyTitle</h1>
</div>
jsFiddle
There is no 100% sure way when it comes to CSS but the title should normally go onto two lines which would be better than what its doing in your screen shots. Post your code if you want someone to look at that.
What you should do though is use media queries to make the sidebar wider when its on a smaller screen:
.sidebar
{
width:12%;
}
#media screen and (max-width: 600px) {
.sidebar
{
width:30%;
}
}
Here is an example
http://codepen.io/nathanfelix/pen/KzZPGy
Also, here you can read more about media queries:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Please try like this:
<div class="sidebar">
<h1>
MY TITLE
</h1>
</div>
.sidebar {
border-right: 1px solid black;
height: 600px;
width: 186px;
}
I've a requirement where I'm supposed to write an hybrid app by using phonegap, html, css,js and java. And that hybrid app has to support wide range of devices (It is an international product). But I'm not supposed to use media queries. So I decided to use bootstrap which does a pretty decent job. However I've a problem.
I wrote a custom page by using bootstrap. code is as given here.:
for text in body, I gave these css
#loaderText{
color: #fff;
margin: 0 auto;
}
.loaderPos{
/*margin: 69px 101px;*/
/*width: 50%;
padding: 0 12%;*/
padding-top: 22%;
padding-left: 22%
}
The text appears to be at center in portrait mode, but appears to be out of context in landscape mode.
I could use a media query like this:
media screen (min-height: 360px) and (orientation:landscape){ } and add css there but the challenge is: Achieve proper alignment in both portrait and landscape mode without using media queries.
How can I do it?
I will advice you to use flexbox. It will make your content center aligned, both horizontally and vertically, only any device, no matter the height and width.
Make these changes in your styles. To know more go through this link
.mainDiv {
padding: 0px;
width: 100%;
height: 99%;
min-height: 100vh;
display: flex;
flex-flow: column;
justify-content: center;
}
.loaderPos {
/* margin: 69px 101px; */
/* padding-top: 22%; */
/* padding-left: 22%; */
}
As you want it without using media-query then you've to make changes in your DOM as well as in your CSS too.
HTML:
<div id="loaderText">
<p>Please wait while downloading data.</p><br />
<p>This may take a few minutes.</p>
</div>
CSS:
#loaderText{
color: #fff;
margin: 0 auto;
text-align: center;
}
#loaderText p {
display: inline-block;
}
.loaderPos{
padding-top: 22%;
}
Also I've edited your JSFiddle , please have a look.