Does anyone know how to responsively control an element’s top margin via a style sheet?
I have a responsive background image that resizes perfectly on my desktop. However, it will not properly scale on my iPhone. I’ve given up trying to make it work primarily because a row with a column that’s designed to scroll over the fixed background displays below the mobile device’s viewport - out of sight. If I raise it up by reducing the top margin, it covers important areas of the background image… if I lower it so it appears where I want on the desktop, it displays out of view on my iPhone… there seems to be no middle ground. So I’ve decided not to have a background on mobile viewports. I’ve written the CSS which nicely disappears the background image for smaller sized devices but I still have the “margin-top” issue. (See my attachment).
Do you have a link to the site, or can you put it on a temporary URL so I can look at the actual live page?
Hi Randy,
The selector should be
div.col-xl-12.col-lg-12.col-md-12 {
margin-top: 10px;
}
But I would add another class name and target that.
div.some-class {
margin-top: 10px;
}
Or you could add bootstrap class mt-2 to your div adjusting the value from 1-5
@Printninja @SureWeb
The homepage is the only one I need to scroll and the top margin for the scrollbody is fine on a desktop but falls short of the viewport’s top in a mobile. I’d like the CSS to alter the top margin to app. 5-10vw on devices narrower than 600px.
The image size for the desktop background is 962x652px and for mobile is a plain dark gray, which works.
Here is my CSS assigned for the homepage:
body {
overflow-x: hidden;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-image: url(‘images/det-j-aerial.jpg’);
background-position: center top;
}
@media only screen and (max-width: 600px) {
body {
background-color: #343a40;
background-image: url(’’);
}
div.row.scrollbody {
margin-top: 10vw;
}
}
Any help is appreciated, as always.
This is the div that is setting the top margin, not div.row.scrollbody
<div style="background-color: #ffffff; padding-bottom: 10px; margin-bottom: 80px; border-radius: 10px; margin-top: 41vw;" class="col-xl-12 col-lg-12 col-md-12">
See the margin-top: 41vw; That’s your problem.
Since you’re setting the margin with an inline style, your CSS media query isn’t going to affect it, because inline styles have a higher specificity.
You need to break this awful habit of using inline styles, and start doing things properly, using classes and stylesheets.
Yeah, @schpengle has also been scolding me for using inlines. I was following PG’s really nice video tutorial on how to do this before I took ill and have since lost the URL. Now that I’m back on my feet, I REALLY want to get back to learning how to use PG’s UI to convert its inlines to stylesheets.
I do appreciate all your guidance and nudges… I got the Det J homepage to behave like I want by following your reply. I’m going to use the Det J project to master the use of CSS and make the site free of inlines – stay tuned for more questions, pleas for help and hopefully, your continued review of my progress. So again, thanks for your help.
Here’s a question that has always bothered me: why does PineGrow enter styles inline by default and not directly into the page’s attached style sheet? A user could optionally add the style as an inline when needed and not as a routine. Again, I’m not a seasoned programmer so maybe this is how styling a page has traditionally been done - inline first, then attached to a style sheet?
It depends on whether the element is already being styled by an existing CSS rule, or if it has no CSS styling applied to it. See the attached image. I have a paragraph on my page with the class .description applied to it (circled in yellow.) If I highlight that class, then the changes I make via the visual editor will be added to the .description class in the CSS stylesheet. But, if I instead have the Style attribute (circled in red) highlighted, then the changes I make via the visual editor will be added as inline styles.
If you want to style an element on the page which has no classes at all applied to it and you don’t want the styling to be inline, then you have to create a class by clicking the Create button and giving the class a unique name.
Or, you can just create the class directly by typing it into whichever CSS stylesheet you want to place it in, and forgo using the visual editor altogether (which is generally how I do my styling.) Once you’ve got CSS down, it’s just faster to type out the rules as you need them, than to go through the extra steps of finding them in the visual editor.
1 Like
