I am setting up a custom header and footer for a client's site which you can view here:
http://gag5.rhinomarketinggroup.com/
The social media links float right just fine here...and on all pages. But for some reason on the 404 pages they do not float to the right. Very confused. Can't seem to find a reason why it would change on the 404 pages.
Example 404 page:
http://gag5.rhinomarketinggroup.com/404
clarifying images:
enter image description here
.et_pb_column.et_pb_column_1_2.et_pb_column_1 {
float: right;
}
On the normal page, you have the following CSS:
#media (min-width: 981px)
.et_pb_gutters3 .et_pb_column_1_2, .et_pb_gutters3.et_pb_row .et_pb_column_1_2 {
width: 47.25%;
}
Which is applied to .et_pb_gutters3 (The part where the LinkedIn icon is)
You also have:
#media (min-width: 981px)
.et_pb_gutters3 .et_pb_column, .et_pb_gutters3.et_pb_row .et_pb_column {
margin-right: 5.5%;
}
Which is applied to .et_pb_column (The part where the logo is)
I'd suggest you add this code to the 404 pages as well.
UPDATE:
Though it seems as if this does not completely solve the problem. The easy way to fix this is to add float:right; to the .et_pb_column_1 (The second half, containing the LinkedIn icon)
Solution to Header:
Change <div class="et_pb_column et_pb_column_1_2 et_pb_column_1"> to <div class="et_pb_column et_pb_column_1_2 et_pb_column_1" style="float:right"> (Line no. 202)
Problem with Footer:
You have used et_pb_column_1_3 and et_pb_column_2_3 classes in 404 page, while you have used et_pb_column_1_2 classes in normal pages.
Solution to Footer:
Replace et_pb_column_1_3 and et_pb_column_2_3 classes with et_pb_column_1_2 in the footer. (Line no. 366 and 384)
You have this problem because of #media rule
if you inspect <div class="et_pb_column et_pb_column_1_2 et_pb_column_1">
you have apply following media rule on it:
#media (min-width: 981px)
.et_pb_gutters3 .et_pb_column_1_2, .et_pb_gutters3.et_pb_row .et_pb_column_1_2 {
width: 47.25%;
}
but on 404 page it is not applying #media rule
Solution: Apply #media rule on 404 page
Related
I'm pretty new to advanced CSS. I have a custom heading section which i want to make centered on mobile only. I have added a class name and the following code but nothings happened.
.mobile-text {
text-align: right;
}
#media (max-device-width: 600px) {
.mobile-text {
text-align: center;
}
}
This is the homepage of this site and the paragraph is the following:
REAL ESTATE THAT CHALLENGES NORMS & ELEVATES EXPECTATIONS. THIS IS COLOURFUL THINKING IN A BLACK AND WHITE WORLD.
Your class on the website is .mobile-text, and it should be mobile-text - The . is only used in selectors to say that the following text is a class name
Also, your inline styles on the element ( style=font-size: 35px... etc ) is overwriting your changes - you can use !important to handle this lazily
.mobile-text {
text-align: right !important;
}
#media (max-device-width: 600px) {
.mobile-text {
text-align: center !important;
}
}
max-device-width will target the width of the entire device area (i.e the device screen). Instead use max-width, which will target the width of the entire browser area.
#media (max-width: 600px) {
.mobile-text {
text-align: center;
}
}
Note: device-width queries are deprecated.
When I check the html of your page I can see the class="" of this <h4>:
class="vc_custom_heading .mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"
In your css you want to manipulate it using the .mobile-text class. Problem here is that you define this class in your html using .mobile-text. That's actually wrong, you need to define it with only mobile-text like this:
class="vc_custom_heading mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"
The . is actually a css selector for a class like # is a selector for an id.
Your media query is not working on desktop if you are check in desktop view.
And also your class declaration is wrong please remove . from mobile-text. :)
max-width is the width of the target display area, e.g. the browser
max-device-width is the width of the device's entire rendering area, i.e. the actual device screen
Please use #media all and (max-width: 600px){}
For more details please visit here
Hope it will help you. :)
I have the follow html in Angular2.
<div class="col-xs-12 col-lg-8" >
<p style="font-size: 30px">
{{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
</p>
</div>
In my view, the text is aligned at the left (as I wanted). How can I say that when is for col-xs-12 it has to be centred?
Thank you.
The best approach for this would be to create a specific class for you container and only use media queries to modify the text position on mobile.
Here's the general idea following the BEM CSS naming convention:
<style type="text/css">
.thing {
... some styles
}
.thing__title {
text-align: center;
}
// tablets start at 768px width
#media (max-width: 767px) {
.thing {
... some mobile styles
}
.thing__title {
text-align: left;
}
}
</style>
<div class="thing col-xs-12 col-lg-8">
<p class="thing__title">... some text</p>
</div>
No need to increase the loading time of your site by adding jQuery to add styles to an element.
Bad idea to target modifier classes from component libraries. Especially your grid as you might removing that or the class name could be deprecated in later versions leaving your site vulnerable.
Can you use jquery?
$('.col-xs-12').css('text-align','center');
There is a good explanation of Bootstrap 3 and 4 Media Queries here at Bootstrap 3 breakpoints and media queries.
Bootstrap provides a great deal of flexibility to your project, but from minute details such as text justification between breakpoints, you will need to add a media query to your own CSS and apply the styles as desired.
So you might try something like this:
<div class="teacher-info col-xs-12 col-lg-8" >
<p class="ta-xs-left" style="font-size: 30px">
{{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
</p>
</div>
<style>
// Default to center the paragraph to center
.teacher-info p {
text-align:center;
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) {
// When the screen is larger than a tablet, left align the text
.ta-xs-left {
text-align:left;
}
}
</style>
Edit
In line with martinsoender's answer, I agree you shouldn't target modifier classes, and should add your own classes. This edit is to show how I would do that.
Essentially, I would add a class to the parent to denote what holds (teacher-info), then give the element I want to modify a class. In this case I create a class that looks similar to a bootstrap class. ta-xs-left ({text-align}-{Xtra-Small}-{Alignment}), then it can be reused wherever you need it.
I'm trying to make my wordpress blog responsive for mobile devices. I was able to customize homepage in style.css, but I'm having some problems with single post page.
The problem is: I have three columns and I want to remove right and left sidebars. But they are not id like on homepage, but classes.
Single post page has one id (#postcolumn) with 3 classes: .leftsidebar, .postzone and .rightsidebar. How do I remove .leftsidebar and .rightsidebar?
Here is my code for homepage, which is working great...
#media only screen and (max-width: 480px) {
#wrapper, #header, #column {
width:400px;
}
#middlecolumn, #rightcolumn, #header, #footer {
display:none
}
}
If I understand your question correctly, your HTML markup for your single post page looks something like the following:
<div id="postcolumn">
<div class="leftsidebar">
// something
</div>
<div class="postzone">
// something
</div>
<div class="rightsidebar">
// something
</div>
</div>
Applying the same logic as your home page, the CSS would look like:
#media only screen and (max-width: 480px) {
#wrapper, #header, #column {
width:400px;
}
#middlecolumn, #rightcolumn, #header, #footer, #postcolumn .leftsidebar, #postcolumn .rightsidebar {
display:none
}
}
I have <div class="rightside"> on every page of my site. It positions a contact form on every page, then at 850 pixels wide screen (for responsive) it hides the contact form with display: none;
#media only screen and (max-width : 850px) {
.rightside {
display: none;
}
}
On the contact us page, I would like to make the contact form still available for this page only. How can I change on the contact us page, so the contact form is still available for devices below 850 on contact us but display: none; on every other page ?
UPDATE:
I wish to use the attributes from .rightside in my css. I have tried:
<div class="rightside" id="contactpage"> in contact page
in the media query for 850
.rightside #contactpage {
float: left;
}
try adding another css style to your code just after the existing one, like this:
<div class="rightside contact"></div>
#media only screen and (max-width : 850px) {
.rightside {
display: none;
}
.rightside.contact {
display: block;
float:right;
}
}
On your HTML, you can add an additional class to all the rightside divs that you want to disappear after a certain point, and then just use CSS selectors to remove these divs only. Change your HTML markup on all the responsive divs, so that instead of <div class = "rightside>, you have <div class = "rightside responsive">. This adds an extra class to the div that is called responsive, and from here you can just select the divs that have this class using .rightside.responsive instead of just .rightside on your media query.
UPDATE
The reason that the code that you recently updated does not work, is because you have a space between the #contactpage and .rightside. By having no space between the two selectors, you are selecting elements that are on the same level, and your code should work.
I noticed this Q & A on stackoverflow here: how to specify a different image in css depending if the user visits on a desktop or a mobile browser
His HTML:
<img src="image.jpg"
data-src-960px="image-960px.jpg"
data-src-1260px="image-1260px.jpg"
alt="">
and CSS is:
img[data-src-960px] {
content: attr(data-src-960px, url);
}
I'm trying to incorporate this for webpage, but am failing miserably...
My HTML:
<div class="container">
<div><img src="images/header.jpg" data-src-mobile="images/header_mobile.jpg" alt="Philadelphia" /></div>
</div>
My CSS:
img[data-src-mobile] {
content: attr(data-src-mobile, url) !important;
}
I have an entire stylesheet devoted to mobile devices. But this doesn't work at all. It always loads up: images/header.jpg
Is the url parameter in the attr supposed to have something in there? I've tried replacing url with ../images/header_mobile.jpg, but that doesn't work either.
How do you use this? I can't seem to find much detail for this on the internet at all... :(
For what it's worth here are some References to people saying that this works:
Using CSS/HTML to Make a Responsive Website in 3 Easy Steps
Responsive images using CSS3
Use min-width, max-width, :after and content:url. For example:
#media screen and (min-width: 961px)
{
a:after {content:url("http://www.eclipse.org/eclipse.org-common/themes/solstice/public/images/logo/eclipse-800x188.png");}
}
#media screen and (max-width: 960px){
a:after {content:url("http://www.eclipse.org/eclipse.org-common/themes/solstice/public/images/logo/eclipse-426x100.png");}
}
<a tabindex="1"></a>
References
Stu Nicholls | CSS PLAY | Content: - CSS Gallery
CSS content and attr
content - CSS | MDN