The absolutely positioned icons in the two columns need stay center aligned across all resolutions. Below is the media query I tried to align the icon in mobile device. It is not accurate in any of the resolutions. How can I correct the CSS?
#media screen and (max-width: 767px) {
.contact-mode-icon {
top: -4rem;
}
.contact-mode-col {
margin-bottom: 6rem !important;
}
}
HTML:
<div class="row connect-with-concierge-row">
<div class="col contact-mode-col col-xs-12 col-md-4">
<div class="contact-mode-icon">
<img src="http://pwp-wordpress/wp-content/uploads/2022/09/emailicon-png.png">
</div>
<div class="contact-mode-content">
<div class="icon-title">SUBMIT QUESTIONS</div>
<div class="icon-description" style="height: 106px;"><span>Fill out this form </span> with your questions or requests and we'll respond ASAP (maximum one business day)</div>
<div class="center-xs connect-with-concierge-cta">
<a id="btn" class="btn" role="button" target="" title="Complete Form">
Complete Form </a>
</div>
</div>
</div>
<div class="col contact-mode-col col-xs-12 col-md-4">
<div class="contact-mode-icon">
<img src="http://pwp-wordpress/wp-content/uploads/2022/09/Call_Icon_png.png" ;="">
</div>
<div class="contact-mode-content">
<div class="icon-title">TALK TO AN EXPERT</div>
<div class="icon-description" style="height: 106px;"><span>Prefer to schedule a call? </span> Meet live with a member of our Gift Concierge team at a time most convenient for you</div>
<div class="center-xs connect-with-concierge-cta">
<a href="#" class="btn cta-btn-purple" role="button" target="" title="Schedule a Meeting">
Schedule a Meeting </a>
</div>
</div>
</div>
</div>
CSS:
.contact-mode-icon {
position: absolute;
top: -3rem;
left: 9rem;
}
.contact-mode-content {
border: 2px solid;
border-color: #A6A2A3;
padding-top: 3rem;
padding-bottom: 1rem;
max-width: 342px;
}
.contact-mode-content .icon-title {
font-family: 'Roboto';
font-weight: bold;
text-transform: capitalize;
font-size: 1.2rem;
margin: 1rem auto;
}
.contact-mode-content .icon-description {
font-family: 'Roboto';
font-size: 1rem;
padding: 0 1.1rem;
margin-bottom: 1rem;
}
.contact-mode-content .icon-description span {
font-weight: bold;
}
.contact-mode-content .btn {
padding: 1rem;
}
.connect-with-concierge {
margin-top: 3rem;
}
The image below shows misaligned icon.
Here is the page
Your icon isn't centered properly in normal resolution - check inspector tool and see that content of the column is left aligned since you set its max width but the div remains the same size.
Now to your question: you can easily fix that with transform: translate property like this:
.contact-mode-icon {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
.contact-mode-content {
#your code that you have already
margin: 0 auto;
}
You will also need to delete that media query fix for content-mode-icon.
Related
I am trying to style the gif by giving it border-radius. However ther gif is smaller than the column itself so border-radius is aplied only to the right side of the gif. Could anyone help me out in applying it to the left side aswell? I dont want to change the background-size: contain!important; because then I will loose the proportions of the gif.
PS. Snippet breakes the row and the gif is in another row but it doesn't matter in this example.
.half-half-image-text {
padding: 70px 0px;
}
.half-half-image-text h1 {
color: #800000;
}
.half-half-image-text .content {
height: 100%;
display: flex;
align-items: center;
padding: 35px 0px;
}
.half-half-image-text .content p {
font-size: 22px;
}
.half-half-image-text .img {
min-height: 320px;
height: 100%;
border-radius: 10px;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="half-half-image-text">
<div class="container" >
<div class="row">
<div class="col-7 col-lg-7" style="padding-right:0">
<div class="content">
<p>At Fluid Automotive, our purpose is to make automotive parts easily accessible for everyone. Working with our partner brands, we aim to retail the highest quality parts, whilst maintaining a high level of customer satisfaction.</p>
</div>
</div>
<div class="col-5 col-lg-5" style="padding-right:0">
<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif" data-gallery="portfolioGallery" class="portfolio-lightbox">
<div class="img customzoom s2" style="background-size: contain!important;box-shadow: none;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif')no-repeat center right;background-size:cover;" alt="Plan rozwoju" title="Plan rozwoju"></div>
</a>
</div>
</div>
</div>
</div>
You could add this style to portfolio-lightbox :
width: 240px;
display: block;
and change min-height:320px; to min-height:240px will solve your problem. Like below :
half-half-image-text {
padding: 70px 0px;
}
.half-half-image-text h1 {
color: #800000;
}
.half-half-image-text .content {
height: 100%;
display: flex;
align-items: center;
padding: 35px 0px;
}
.half-half-image-text .content p {
font-size: 22px;
}
.half-half-image-text .img {
min-height: 240px;
height: 100%;
border-radius: 10px;
}
.portfolio-lightbox {
width: 240px;
display: block;
}
<div class="half-half-image-text">
<div class="container" >
<div class="row">
<div class="col-7 col-lg-7" style="padding-right:0">
<div class="content">
<p>At Fluid Automotive, our purpose is to make automotive parts easily accessible for everyone. Working with our partner brands, we aim to retail the highest quality parts, whilst maintaining a high level of customer satisfaction.</p>
</div>
</div>
<div class="col-5 col-lg-5" style="padding-right:0">
<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif" data-gallery="portfolioGallery" class="portfolio-lightbox">
<div class="img customzoom s2" style="background-size: contain!important;box-shadow: none;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif')no-repeat center right;background-size:cover;" alt="Plan rozwoju" title="Plan rozwoju"></div>
</a>
</div>
</div>
</div>
</div>
Simply use an image tag.
.imgradius {
border-radius: 10px
}
<img class="imgradius" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif"></img>
Here are these elements at 100% screen size:
Here they are at 110%:
CSS:
#menu_nav_item {
margin-right: 70px;
font-size: 28px;
}
.menu_nav_item1 {
display: inline-block;
margin-top: 15px;
}
HTML:
<div class="col-lg-6" id="menu_buttons">
<center style="padding-top:150px">
<div id="menu_container" style="min-width:300px;">
<div class="menu_nav_item1"><a id="menu_nav_item" href="https://cvent.me/L4k0Nm" class="jump-link" data-feathr-click-track="true">ATTEND</a></div>
<div class="menu_nav_item1"><a id="menu_nav_item" href="https://cvent.me/L4k0Nm" class="jump-link" data-feathr-click-track="true">PROGRAM</a></div>
<div class="menu_nav_item1"><a id="menu_nav_item" href="https://cvent.me/L4k0Nm" class="jump-link" data-feathr-click-track="true">EXPO</a></div>
<div class="menu_nav_item1">
<a id="menu_nav_item" href="https://cvent.me/L4k0Nm" class="btn-primary" style="border-radius: 0px!important; padding:20px;" data-feathr-click-track="true"><b>REGISTER NOW</b></a>
</div>
</div>
</center>
</div>
My Question: How do I stop the menu items from moving when increasing window size %, or when making the screen smaller?
Thanks!
instead of using px in code
#menu_nav_item {
margin-right: 70px;
font-size: 28px;
}
.menu_nav_item1 {
display: inline-block;
margin-top: 15px;
}
make use of % like this
#menu_nav_item {
margin-right: 70%;
font-size: 28%;
}
.menu_nav_item1 {
display: inline-block;
margin-top: 15%;
}
I'm having a tough time keeping my content centered within a certain width on my personal website. I have tried many methods such as setting body to a fix width and my wrapper container to a percentage of that. I have attached a picture of my website here and highlighted where I want my content to be contained in the picture shown
.
I want my content of my website centered within that highlighted area, while at the same time keeping the background to be the full size of the screen.
I realize this may be a simple question for many, but I have spent all day looking for and trying out different methods to do this with no avail.
body {
background-color: #F0f0f0;
text-align: center;
margin-right: 0px;
margin-left: 0px;
}
.wrapper {
text-align: center;
}
.topSection {
height: 300px;
border: solid 5px;
}
.mainAbout {
padding-left: 50px;
padding-right: 50px;
vertical-align: middle;
}
.mainAbout h1 {
font-size: 60px;
font-family: arvo, sans-serif;
margin-bottom: 5px;
}
#leftBrace {
vertical-align: middle;
}
#rightBrace {
vertical-align: middle;
}
.projects {
height: 864px;
border: solid 5px;
margin-top: 2px;
background: #0F1217;
}
.projects h2 {
color: #e6e6e6;
font-family: arvo, sans-serif;
font-size: 50px;
}
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<div class="wrapper">
<!---- Wrapper Starts Here --->
<div class="topSection" style="display:block" ;>
<!---- Name Section Starts Here --->
<div id="leftBrace" style="display: inline-block" ;>
<img src="leftbrace.png">
</div>
<div class="mainAbout" style="display: inline-block" ;>
<!--- Main Name and About me Section ---->
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
<!--- End mainAbout --->
<div id="rightBrace" style="display: inline-block" ;>
<img src="rightbrace.png">
</div>
</div>
<!--- Wrapper Ends Here --->
<div class="projects">
<h2> Projects </h2>
</div>
<div class="contact">
</div>
</div>
<!--- Wrapper Ends Here --->
<footer>
</footer>
Instead of using background you could style curly-braces using pseudo selector :before and :after, thus it works like font styling, you could use transform:translate to center your intro text container, check below codes.
#box {
width: 100%;
height: 300px;
overflow: hidden;
background: #ccc;
}
#box > .cnt {
width:50%;
text-align: center;
top: 50%;
left: 50%;
position: relative;
transform: translate(-50%, -50%);
}
#box:before {
content:"{";
font-size: 250px;
position: absolute;
top: 0;
left:10%;
}
#box:after {
content: "}";
font-size: 250px;
position: absolute;
top: 0;
right:10%;
}
<div id="box">
<div class="cnt">
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
</div>
Apply margin: 0 auto; to your content class. This will work.
You need to make sure add an inner class inside each wrapper and define your desired width. And need to apply margin: 0 auto to the inner. I added demo snippet.If u want specific wrapper full width just remove innerclass that's enough you will get full width. I hope it will help you.
.wrapper {
height: 300px;
width: 100%;
background: orange;
margin-bottom: 20px;
}
.inner {
width: 70%;
margin: 0 auto;
background: pink;
height: 100%;
}
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
I know this question has been asked a lot, but I haven't been able to find a solution among the answers. I'm trying to center a text on an image, but I'm having some trouble with the vertical alignment. This is my code:
<div class="col-sm-12 col-md-12 col-lg-12 main_category_container">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="wrap">
<h3 class="sub_category_title">Centered text</h3>
<img src="some image">
</div>
</div>
</div>
and
.wrap {
height:auto;
margin: auto;
text-align:center;
position:relative;
}
h3.sub_category_title {
vertical-align: middle;
}
Right now the text is horizontally centered above the image, but I can't figure out how to vertically align it in the middle of the image.
Thanks in advance!
Generally if you're trying to put one element overlapping another, you'll end up using position: absolute or position: relative - otherwise, the contents will naturally arrange themselves in a block flow.
You could try something like this:
.image-wrapper {
position: relative;
text-align: center;
width: 300px; /* change or remove as needed */
margin: auto;
}
.image-link { display: block; }
.image-text {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
/* The rest of this is just for this demo,
you can change it for your situation. */
font-weight: bold;
color: white;
font-family: sans-serif;
background: rgba(0, 0, 0, 0.5);
}
<div class="image-wrapper">
<a class="image-link" href="#">
<img class="image" src="http://loremflickr.com/300/200" alt="kitten!">
<h3 class="image-text">A Centered Label</h3>
</a>
</div>
I am making a site and using bootstrap 3.3.5. The only problem I am having at the moment is the row/column structure I have is not displaying correctly on mobile.
Here is the link to the project: https://foreverfightermovie.herokuapp.com/#/home
It looks fine so far on a computer browser, but on mobile the ribbons are stacked onto of the middle panel section. Here is the html I am using:
<div class="jumbotron">
<h3 class="text-right" style="margin-right: 100px"> Production status: <b>Pre-Production</b> </h3>
<h1 class="text-center">The official site of <h1>
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="/images/breast-cancer-ribbon.png" width="200" height="400" style="margin-left: 30px"/>
</div>
<div class="col-md-6">
<div class="panel-body text-center px-font" style="background-color: pink">
<br><b><FONT FACE="Lucida Console">FOREVER<br>FIGHTER</FONT></b><br><br>
<h3><i>"In life you can fight forever, but you can't live forever. One is a choice and the other is a guarantee"</i><h3>
</div>
</div>
<div class="col-md-3">
<img src="/images/breast-cancer-ribbon.png" width="200" height="400"/>
</div>
</div>
</div>
<br>
<p class="text-center"><a class="btn btn-primary btn-lg text-center" style="color: #2BDE73">
<img src="/images/kickstarter-logo.png" width="30" height="30"/>
Click for Donation Pledges</a></p>
</div>
Also: Here is the css I am using:
.tab { margin-left: 20px;
margin-right: 20px; }
.imagetab { margin-left: 40px;
margin-right: 40px;}
.para {
text-indent: 40px;
}
.jumbotron {
margin-left: 30px;
margin-right: 30px;
}
html {font-size: 90%;}
div.px-font {
font-size: 110px;
}
Does anyone have any suggestions on how to fix it?
Bootstrap's strength is stacking, but you can override whatever you'd like in your custom CSS. For what you'd like to do I'd use a media query with Bootstrap's built-in breakpoints. Here's a simple example:
#media (max-width: #screen-sm-min) {
/* This is the row containing your main panel and two ribbon divs. */
.main-row {
position: relative;
}
/* Add this to each of your ribbons. The ".left" & ".right" are self-explanatory. */
.ribbon {
position: absolute;
top: 100px;
}
.ribbon.left { left: 0px; }
.ribbon.right { right: 0px; }
/* Resize your images here to fit as you'd like them. */
.ribbon img {
height: 100px;
width: 50px;
}
}
You can find some more info on the queries Bootstrap offers here: http://getbootstrap.com/css/#grid-media-queries