I am a newbie experimenting with Wordpress. Would like to know the answer for the following question:
In the following website : http://thejuicesensei.com/wp/
I have a picture in my header. On a full screen it looks ok but on mobile and when minimized the picture is on the left of the page. I would like it to be on the right. I thought that maybe I had to use CSS to reposition it so i did the following:
.widget-header img { float: left; } to .widget-header img { float: right; }
in hopes that it would work. However nothing seems to have changed. Did i select the wrong class or something? Any help would be appreciated and sorry if it sounds like such a basic question.
(currently using the splash theme for wordpress)
Right now it looks like this:
I want the image to be on the right so there isnt that ugly gap of white.
Regards
Style parent of img from float:left to float:right
#media screen and (max-width: 728px){
.widget-header {
max-width: 100%;
float: right; //change this
margin-top: 0;
}
}
Please add float:right to below class.
#media screen and (max-width: 728px){
.widget-header {
float: right;
}
}
Related
I've a small issue. I've an image with float: left; and then a div with text. The result is something like that : https://css-tricks.com/wp-content/csstricks-uploads/web-text-wrap.png
Which is great. But when the screen got smaller, at the end, because the image is only 250px large, there's the image on the left and few words on the right. I would like to "push" the div with test under the image and center the image at the same time : when the screen is, for example 400px large.
How can I do this !? It seems quite easy, but all the tutos or codepen I tried just confused me...
Thanks
Research media tags I think they are exactly what you are looking for.
So your css would go something like this:
#media all (width: 400px){
.image{
...
margin: 0 auto;
}
}
Thanks Constantly Confused and smoggers.
I used smoggers' code, didn't worked as expected, but was a perfect base to try and find solution :
.images {float: left;}
#media screen and (max-width: 400px) {
.images {
float: none;
width: auto;
display: table;
margin: 0 auto;
padding-bottom: 5%;
}
}
Thanks again.
Here is my template:
<div id="block1">text</div>
<div id="block2">
<span>content of variable size</span>
</div>
and some basic CSS
#block1 {
float:left;
}
#block2 {
float:right;
}
#block2 span {
}
When reducing the width, how could I make it behave so that, once the two divs cannot fit the page inline, the second div will go below the first (rather than be right floated anymore)?
NOTE: I would like to avoid using media queries.
This responsive theme CSS would be used for multiple sites with content of different sizes.
JSFiddle
In this current JSFiddle, The second div is on the right hand-side. It is fine to me.
If possible without media queries, i would like to design css so that once the second div goes below , the span content is not at the right-hand side
If you mean "I want div2 to go below, but aligned left this time", it's not possible as this behaviour is not predictable using CSS only.
There's no CSS-way to know when it goes below, so impossible to change the floating attribute at this moment.
You could achieve this using Javascript or jQuery. Logic would be:
on ( window resize ) {
if ( div1_width + div2_width > container_width ) {
Change div2 CSS.
}
}
Of course I would suggest to use media queries too.
You can set min-width on the divs. Then, when the line is too small, the one on the right will drop down. However, it will still be floated which may cause issues. That's where media queries come into play to fix such things.
Too many media queries would not make for a pretty responsive design, not to mention they would be a headache.
Anyway, you would have to use at least one media query to achieve a truly responsive design, the simplest example is below:
<div id="block1">text</div>
<div id="block2"> <span>content of variable size</span>
</div>
* {
padding: 0;
margin: 0;
}
#block1 {
float:left;
height: 200px;
background: yellow;
width: 49.5%;
margin-right: .5%;
}
#block2 {
float:right;
height: 200px;
background: tomato;
width: 49.5%;
margin-left: .5%;
}
#block2 span {
}
#media only screen and (max-width : 768px) {
#block1 {
float:none;
width: 100%;
}
#block2 {
float:none;
width: 100%;
}
}
Fiddle here.
If you want to have a look at something more practical, a good starting point is here(its an example of an accordion changing layouts depending on screen size, using media queries).
I don't know what I did, but I either shifted my header and nav to the right or the rest of the page to the left. Using tw bootstrap. I can't figure it out. I've fire-bugged it and looked through my css edits and don't see any negative margins (is what I suspect).
http://skeeterz71.com/auto
If someone could help me out I would appreciate it. What should be showing is the header logo and top nav and the rest of the page should line up on the left and top nav right with the right side of the page.
Thanks
T
I'm not entirely sure what it is you want to achieve, but from what I'm guessing, adding these CSS changes might help:
.span12 {
margin-left: 0;
}
.span6 {
width: auto;
}
#social-wrapper {
float: right;
}
ul.nav.pull-left {
margin: auto;
width: 100%;
}
.topNavRow {
margin-left: 0;
margin-right: -11.5%;
}
#media (max-width: 1200px) {
.topNavRow {
margin-left: 0;
margin-right: -8.5%;
}
}
(You can just add that styling to your Main.css) - if that helps :)
I have this site header I'm working on but I can't get the logo and the site title to line up horizontally. I'm relatively new to CSS so would appreciate any hand-holding anyone can offer please ;-)
The logo image is styled with:
.logo {
float:left;
}
Whereas the h1.site-title and h2.site-description text is styled thus:
h1.site-title, h2.site-description {
position:relative;
margin-left: 130px; !important
}
I'm pretty sure I need to make another DIV and can't get the positioning right so the logo is at the left, then immediately next to it the site title/description.
(it should be #logo) Floating them both left works
#logo {
float: left;
}
.home-link {
float: left;
}
and remove the margin-left
There are a couple of things that I would recommend changing:
In your HTML, you have logo set to an ID, so in your CSS it should use a # instead of a period.
You do not need to tag qualify your classes in your CSS, meaning the h1 and h2 are not needed, just .site-title and .site-description should work.
Avoid using !important whenever possible. It makes your code very hard to adjust later.
instead of working with .site-title and .site-description work with their wrapping container, .home-link. Float both it and #logo left.
If you want them to line up side by side, you will have to change the width of home-link to something smaller than 100%.
remove the margin-left.
so your CSS would look like this:
#logo { float: left; }
.home-link { float: left; width: 75%; }
Picture the following:
A navbar on top, a sidebar on each side of the page (left and right) and a content div sandwiched between those asides. Everything looks great on a desktop.
Enter a media query for a single column layout for mobile view. Now the layout is Nav, left sidebar underneath, content under that and the right sidebar under the content.
My question is how to get the right sidebar under the left sidebar for the mobile media query but leave it untouched for the desktop view, without touching the markup and only changing the CSS. Here is a link to a fiddle to show what I mean:
Fiddle
Everything for the desktop layout is inside of a
#media only screen and (min-width: 768px) { }
CSS block.
I know you've asked for "only changing the CSS". So first of all maybe there is a solution with the new css order functionality. But then why not using a much simpler way with changing the markup only a little bit (DEMO).
In the following example I've removed every piece of code not needed to demonstrate the solution in your fiddle.
You could just move the right sidebar before the content element and then float them left/right in desktop mode.
.sidebar {
width: 20%;
}
.content {
width: 60%;
float: left;
}
.sidebar_right {
float: right;
}
.sidebar_left {
float: left;
}
In mobile mode, you remove the float so that the 3 elements get back to their original "markup position".
#media only screen and (max-width: 768px) {
.sidebar, .content {
float: none;
width: 100%;
}
}