Issue
I have a WordPress theme I have developed locally and the carousel title has like a dark transparent bar behind it that takes up the whole browser end to end. The CSS styling for that is this:
.carousel-title {
margin: 0 -9999rem;
background: rgba(0, 0, 0, 0.5);
font-size: 42px !important;
}
Now I need to alter it for iPhone size because the styling above is not mobile responsive, but I can't just put the styling above in a @media screen and (max-width: 568px) because it will just keep the styling for a full size browser. I need for the text to wrap itself down so it can be seen just like the rest of the text does. If I do this:
@media screen and (max-width: 568px) {
.carousel-title {
margin: 0;
}
}
inside of the media query then great the text wraps, but the dark transparent stripe behind the letters turns into a block, I still need that to look like a banner that spans the whole width of the iPhone screen.
Here is the generated HTML:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>Mirror and Glass</title>
<link rel='dns-prefetch' href='//s.w.org' />
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost:8888\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.7.3"}};
!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),!(j.toDataURL().length<3e3)&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,65039,8205,55356,57096),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,55356,57096),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55357,56425,55356,57341,8205,55357,56507),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55357,56425,55356,57341,55357,56507),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
<style type="text/css">
img.wp-smiley,
img.emoji {
display: inline !important;
border: none !important;
box-shadow: none !important;
height: 1em !important;
width: 1em !important;
margin: 0 .07em !important;
vertical-align: -0.1em !important;
background: none !important;
padding: 0 !important;
}
</style>
<link rel='stylesheet' id='dashicons-css' href='http://localhost:8888/wp-includes/css/dashicons.min.css?ver=4.7.3' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css' href='http://localhost:8888/wp-includes/css/admin-bar.min.css?ver=4.7.3' type='text/css' media='all' />
<link rel='stylesheet' id='fawesome-css' href='http://localhost:8888/wp-content/themes/mirror_glass/assets/css/font-awesome.css?ver=4.7.3' type='text/css' media='all' />
<link rel='stylesheet' id='bootcss-css' href='http://localhost:8888/wp-content/themes/mirror_glass/assets/css/bootstrap.min.css?ver=4.7.3' type='text/css' media='all' />
<link rel='stylesheet' id='stylecss-css' href='http://localhost:8888/wp-content/themes/mirror_glass/style.css?ver=4.7.3' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost:8888/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://localhost:8888/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='http://localhost:8888/wp-content/themes/mirror_glass/assets/js/bootstrap.min.js?ver=4.7.3'></script>
<link rel='https://api.w.org/' href='http://localhost:8888/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8888/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost:8888/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.7.3" />
<link rel="canonical" href="http://localhost:8888/home/" />
<link rel='shortlink' href='http://localhost:8888/?p=47' />
<link rel="alternate" type="application/json+oembed" href="http://localhost:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%3A8888%2Fhome%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://localhost:8888/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%3A8888%2Fhome%2F&format=xml" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}
</style>
</head>
<header class="site-header" role="banner">
<!-- NAVBAR
================================================== -->
<body class="page-template-default page page-id-47 logged-in admin-bar no-customize-support wp-custom-logo">
<div class="navbar-wrapper">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="http://localhost:8888/" class="custom-logo-link" rel="home" itemprop="url"><img width="222" height="97" src="http://localhost:8888/wp-content/uploads/2017/02/cropped-logo1.png" class="custom-logo" alt="" itemprop="logo" /></a> </div><!-- navbar-header -->
<h3><a href="#" class="showroom"><strong>Showroom</strong> 317.843-1204</a></h3>
<!-- We cannot leave the below as-is, we need to set the menu in the WordPress dashboard -->
<nav class="navbar-collapse collapse"><ul id="menu-primary" class="nav navbar-nav navbar-right"><li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-8"><a title="Home" href="http://localhost:8888/">Home</a></li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a title="About" href="http://localhost:8888/about/">About</a></li>
<li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a title="Quote" href="http://localhost:8888/sample-page/">Quote</a></li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a title="Products" href="http://localhost:8888/products/">Products</a></li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a title="Services" href="http://localhost:8888/services/">Services</a></li>
</ul></nav>
</div>
</div>
</div>
</header>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active" ></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="carousel-image">
<img width="1440" height="700" src="http://localhost:8888/wp-content/uploads/2017/02/carousel3.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost:8888/wp-content/uploads/2017/02/carousel3.jpg 1440w, http://localhost:8888/wp-content/uploads/2017/02/carousel3-300x146.jpg 300w, http://localhost:8888/wp-content/uploads/2017/02/carousel3-768x373.jpg 768w, http://localhost:8888/wp-content/uploads/2017/02/carousel3-1024x498.jpg 1024w" sizes="(max-width: 1440px) 100vw, 1440px" /> <div class="carousel-caption">
<h1 class="carousel-title">One more for good measure.</h1>
<h2><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit</p>
</h2>
</div>
</div>
</div>
<div class="item">
<div class="carousel-image">
<img width="1440" height="700" src="http://localhost:8888/wp-content/uploads/2017/02/carousel2.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost:8888/wp-content/uploads/2017/02/carousel2.jpg 1440w, http://localhost:8888/wp-content/uploads/2017/02/carousel2-300x146.jpg 300w, http://localhost:8888/wp-content/uploads/2017/02/carousel2-768x373.jpg 768w, http://localhost:8888/wp-content/uploads/2017/02/carousel2-1024x498.jpg 1024w" sizes="(max-width: 1440px) 100vw, 1440px" /> <div class="carousel-caption">
<h1 class="carousel-title">Another example headline.</h1>
<h2><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</h2>
</div>
</div>
</div>
<div class="item">
<div class="carousel-image">
<img width="1440" height="700" src="http://localhost:8888/wp-content/uploads/2017/02/carousel1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://localhost:8888/wp-content/uploads/2017/02/carousel1.jpg 1440w, http://localhost:8888/wp-content/uploads/2017/02/carousel1-300x146.jpg 300w, http://localhost:8888/wp-content/uploads/2017/02/carousel1-768x373.jpg 768w, http://localhost:8888/wp-content/uploads/2017/02/carousel1-1024x498.jpg 1024w" sizes="(max-width: 1440px) 100vw, 1440px" /> <div class="carousel-caption">
<h1 class="carousel-title">When it Has to Be Mirror or Glass. Call Us!</h1>
<h2></h2>
</div>
</div>
</div>
</div>
<!-- Left and right Carousel Arrows -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<!-- Images Feature Section
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<!-- <div class="container marketing"> -->
<!-- Three columns of text below the carousel -->
<section id="image-features">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail" id="three-images">
<img width="242" height="200" src="http://localhost:8888/wp-content/uploads/2017/02/img-rounded-1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> <div class="caption">
<h4><a href="#" class="link" id="image-feature-title">Our Services ></a></h4>
</div>
</div>
</div><!-- .col-sm-6 -->
<div class="col-sm-6 col-md-4">
<div class="thumbnail" id="three-images">
<img width="242" height="200" src="http://localhost:8888/wp-content/uploads/2017/02/img-rounded-1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> <div class="caption">
<h4><a href="#" class="link" id="image-feature-title">Gallery ></a></h4>
</div>
</div>
</div><!-- .col-sm-6 -->
<div class="col-sm-6 col-md-4">
<div class="thumbnail" id="three-images">
<img width="242" height="200" src="http://localhost:8888/wp-content/uploads/2017/02/img-rounded-1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> <div class="caption">
<h4><a href="#" class="link" id="image-feature-title">Showroom Location ></a></h4>
</div>
</div>
</div><!-- .col-sm-6 -->
</div>
</div>
</section><!-- /.row -->
<!-- Indianapolis Feature Section
================================================== -->
<section class="row" id="indy-glass">
<div class="container">
<div class="col-md-12">
<h2>Indianapolis Mirror and Glass by Mirror Concepts, Inc.</h2>
<hr /><br>
<p class="lead">Our services include mirrors and glass, mirrored walls and doors, bath hardware and accessories, windows and custom framing choices for mirrors. We serve the greater Indianapolis, Indiana area including Fishers, Carmel, Zionville, Noblesvill, Marion, Geist, Greenwood and other areas.</p>
</div>
<div class="col-md-12 text-center">
<p><a class="btn btn-danger" href="#" role="button">Learn more ></a></p>
</div>
</div>
</section>
<!-- Testimonial Section
================================================== -->
<section class="row content-region-2 pt40 pb40" id="customer-testimonial">
<div class="container">
<div class="col-md-12">
<h2>What Our Customers Are Saying...</h2>
<p class="lead">We love Mirror Concepts! The team is professional and courteous and the new weightroom
mirrors look awesome!</p>
<cite>~ Jeff and Cindy Kivett</cite>
<p><a href="#" id="gallery">Read more ></a></p>
</div>
</div>
</section>
<!-- Social Media Section
================================================== -->
<section id="social-media-features">
<div class="container">
<div class="col-md-12">
<!-- If user uploaded an image -->
<img src="http://localhost:8888/wp-content/uploads/2017/02/facebook-icon-sm.png" alt="">
<hr />
<h2 class="social-media">What's New from Our Facebook Page</h2>
</div>
<div class="row" id="facebook-link">
<div class="col-sm-6 col-md-3">
<div class="thumbnail" id="social-media">
<img width="171" height="180" src="http://localhost:8888/wp-content/uploads/2017/02/social_media1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> </div>
</div><!-- /.col-lg-2 -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail" id="social-media">
<img width="171" height="180" src="http://localhost:8888/wp-content/uploads/2017/02/social_media1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> </div>
</div><!-- /.col-lg-2 -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail" id="social-media">
<img width="171" height="180" src="http://localhost:8888/wp-content/uploads/2017/02/social_media1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> </div>
</div><!-- /.col-lg-2 -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail" id="social-media">
<img width="171" height="180" src="http://localhost:8888/wp-content/uploads/2017/02/social_media1.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" /> </div>
</div><!-- /.col-lg-2 -->
</div>
</div>
<h4><a href="#" id="target">See more on Facebook ></a></h4>
</section>
<!-- FOOTER -->
<footer class="footer content-region-4 pt30 pb40">
<div class="container">
<div class="col-lg-12">
<a href="https://twitter.com" target="_blank" class="badge social twitter"><i class="fa fa-twitter"></i></a>
<a href="https://pinterest.com" target="_blank" class="badge social pinterest"><i class="fa fa-pinterest"></i></a>
<a href="https://facebook.com" target="_blank" class="badge social facebook"><i class="fa fa-facebook"></i></a>
</div>
<div class="col-md-12">
<p>Mirror Concepts, Inc. 950 3rd Ave. S.W., Carmel, IN 46032, 317-843-1204</p>
<p>Showroom Hours: Monday-8a-5p Monday-Friday | Saturday and Evenings by Appointment</p>
<p> Copyright © 2017 Mirror Concepts, Inc. | Website by MediaFuel</p>
</div>
</div>
</footer>
<script type='text/javascript' src='http://localhost:8888/wp-includes/js/admin-bar.min.js?ver=4.7.3'></script>
<script type='text/javascript' src='http://localhost:8888/wp-includes/js/wp-embed.min.js?ver=4.7.3'></script>
<!--[if lte IE 8]>
<script type="text/javascript">
document.body.className = document.body.className.replace( /(^|\s)(no-)?customize-support(?=\s|$)/, '' ) + ' no-customize-support';
</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript">
(function() {
var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
request = true;
b[c] = b[c].replace( rcs, ' ' );
// The customizer requires postMessage and CORS (if the site is cross domain)
b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
}());
</script>
<!--<![endif]-->
<div id="wpadminbar" class="nojq nojs">
<a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Toolbar" tabindex="0">
<ul id="wp-admin-bar-root-default" class="ab-top-menu">
<li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wp-admin/about.php"><span class="ab-icon"></span><span class="screen-reader-text">About WordPress</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
<li id="wp-admin-bar-about"><a class="ab-item" href="http://localhost:8888/wp-admin/about.php">About WordPress</a> </li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
<li id="wp-admin-bar-wporg"><a class="ab-item" href="https://wordpress.org/">WordPress.org</a> </li>
<li id="wp-admin-bar-documentation"><a class="ab-item" href="https://codex.wordpress.org/">Documentation</a> </li>
<li id="wp-admin-bar-support-forums"><a class="ab-item" href="https://wordpress.org/support/">Support Forums</a> </li>
<li id="wp-admin-bar-feedback"><a class="ab-item" href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a> </li></ul></div> </li>
<li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wp-admin/">Mirror and Glass</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
<li id="wp-admin-bar-dashboard"><a class="ab-item" href="http://localhost:8888/wp-admin/">Dashboard</a> </li></ul><ul id="wp-admin-bar-appearance" class="ab-submenu">
<li id="wp-admin-bar-themes"><a class="ab-item" href="http://localhost:8888/wp-admin/themes.php">Themes</a> </li>
<li id="wp-admin-bar-menus"><a class="ab-item" href="http://localhost:8888/wp-admin/nav-menus.php">Menus</a> </li></ul></div> </li>
<li id="wp-admin-bar-customize" class="hide-if-no-customize"><a class="ab-item" href="http://localhost:8888/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%3A8888%2Fhome%2F">Customize</a> </li>
<li id="wp-admin-bar-updates"><a class="ab-item" href="http://localhost:8888/wp-admin/update-core.php" title="1 Plugin Update"><span class="ab-icon"></span><span class="ab-label">1</span><span class="screen-reader-text">1 Plugin Update</span></a> </li>
<li id="wp-admin-bar-comments"><a class="ab-item" href="http://localhost:8888/wp-admin/edit-comments.php"><span class="ab-icon"></span><span class="ab-label awaiting-mod pending-count count-0" aria-hidden="true">0</span><span class="screen-reader-text">0 comments awaiting moderation</span></a> </li>
<li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wp-admin/post-new.php"><span class="ab-icon"></span><span class="ab-label">New</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu">
<li id="wp-admin-bar-new-post"><a class="ab-item" href="http://localhost:8888/wp-admin/post-new.php">Post</a> </li>
<li id="wp-admin-bar-new-media"><a class="ab-item" href="http://localhost:8888/wp-admin/media-new.php">Media</a> </li>
<li id="wp-admin-bar-new-page"><a class="ab-item" href="http://localhost:8888/wp-admin/post-new.php?post_type=page">Page</a> </li>
<li id="wp-admin-bar-new-bcarousel"><a class="ab-item" href="http://localhost:8888/wp-admin/post-new.php?post_type=bcarousel">Carousel Option</a> </li>
<li id="wp-admin-bar-new-images_feature"><a class="ab-item" href="http://localhost:8888/wp-admin/post-new.php?post_type=images_feature">Image Feature</a> </li>
<li id="wp-admin-bar-new-social_media_feature"><a class="ab-item" href="http://localhost:8888/wp-admin/post-new.php?post_type=social_media_feature">Social Media Feature</a> </li>
<li id="wp-admin-bar-new-testimonial"><a class="ab-item" href="http://localhost:8888/wp-admin/post-new.php?post_type=testimonial">Testimonial</a> </li>
<li id="wp-admin-bar-new-user"><a class="ab-item" href="http://localhost:8888/wp-admin/user-new.php">User</a> </li></ul></div> </li>
<li id="wp-admin-bar-edit"><a class="ab-item" href="http://localhost:8888/wp-admin/post.php?post=47&action=edit">Edit Page</a> </li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
<li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://localhost:8888/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" /><label for="adminbar-search" class="screen-reader-text">Search</label><input type="submit" class="adminbar-button" value="Search"/></form></div> </li>
<li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" aria-haspopup="true" href="http://localhost:8888/wp-admin/profile.php">Howdy, admin<img alt='' src='http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=26&d=mm&r=g' srcset='http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=52&d=mm&r=g 2x' class='avatar avatar-26 photo' height='26' width='26' /></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class="ab-submenu">
<li id="wp-admin-bar-user-info"><a class="ab-item" tabindex="-1" href="http://localhost:8888/wp-admin/profile.php"><img alt='' src='http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=64&d=mm&r=g' srcset='http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=128&d=mm&r=g 2x' class='avatar avatar-64 photo' height='64' width='64' /><span class='display-name'>admin</span></a> </li>
<li id="wp-admin-bar-edit-profile"><a class="ab-item" href="http://localhost:8888/wp-admin/profile.php">Edit My Profile</a> </li>
<li id="wp-admin-bar-logout"><a class="ab-item" href="http://localhost:8888/wp-login.php?action=logout&_wpnonce=ce320a9d17">Log Out</a> </li></ul></div> </li></ul> </div>
<a class="screen-reader-shortcut" href="http://localhost:8888/wp-login.php?action=logout&_wpnonce=ce320a9d17">Log Out</a>
</div>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</body>
</html>
Solution
From the code you've provided, here's a way of mimicking the grey stripe behind that text with a similar technique, and have it extend into negative margins so it goes full width of the browser. Just don't use the .carousel-title
element to draw the background and use a pseudo element based off of that element to draw it instead.
.carousel-title {
margin: 0 -9999rem;
font-size: 42px !important;
background: rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 568px) {
.carousel-title {
margin: 0;
position: relative;
background: none;
}
.carousel-title:after {
content: '';
background: rgba(0, 0, 0, 0.5);
left: -9999px; right: -9999px;
top: 0; bottom: 0;
position: absolute;
}
}
<h1 class="carousel-title">Another example headline.</h1>
Answered By - Michael Coker
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.