I am using a theme to which I have added an image header (with our logo). I have called this image "https://www.londonim.co.il/wp-content/uploads/2019/04/logo.jpg". the website address is https://londonim.co.il - it is in Hebrew (regardless).
The div in which "logo.jpg" is situated is inheriting some display from the there (i think "block"), and I would very much like it to be centered.
In order to try and center it i have used margins of 25% but it would not keep its central alignment when displayed in bigger screens (unless in full screen mode).
when i temper with the wrapper's display property it generally disappears or loses the alignment altogether. Any thoughts please?
theme header:
<div class="cutewp-container" id="cutewp-header" itemscope="itemscope" itemtype="http://schema.org/WPHeader" role="banner">
<div class="cutewp-head-content clearfix" id="cutewp-head-content">
<div class="cutewp-outer-wrapper">
<div class="cutewp-header-inside clearfix">
<div id="cutewp-logo">
<div class="site-branding">
<a href="https://www.londonim.co.il/" rel="home" class="cutewp-logo-img-link">
<img src="https://www.londonim.co.il/wp-content/uploads/2019/04/logo.jpg" alt="" class="cutewp-logo-img">
</a>
</div>
my tweaks:
/* homepage tweaks */
.cutewp-main-wrapper {
position:relative!important;
margin-left:12.5%;
margin-right:12.5%;
}
#cutewp-logo {
margin-left:25%;
margin-right:25%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#cutewp-primary-navigation {
text-align: center;
text-align: -webkit-center;
}
#cutewp-header {
text-align: center;
text-align: -webkit-center;
}
.menu-main-container {
margin-left: 25%;
}
Thanks in advance for the help!
The best solution is to:
#cutewp-logo {
margin-left:25%;//delete this
margin-right:25%;//delete this
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;//delete this
width: 100vw;//add this
}
The element isn't centering because it doesn't occupy the full width of the screen therefore has no reference on to be centered to
You need to clear out a few of those margin-left and margin-right
CHANGE
#cutewp-logo {
margin: 5px 0px 5px 0px;
float: left;
width: 41%;
}
.cutewp-main-wrapper {
position: relative!important;
margin-left: 12.5%;
margin-right: 12.5%;
}
#media only screen and (max-width: 890px) {
#cutewp-header {
margin-left: 25%;
background-color: white;
}
.cutewp-content-wrapper {
margin-left: 25%;
}
}
TO
#cutewp-logo {
margin: auto;
}
.cutewp-main-wrapper {
position: relative!important;
}
#media only screen and (max-width: 890px) {
#cutewp-header {
background-color: white;
}
.cutewp-content-wrapper {
margin: auto;
}
}
This will fix the issue on both your desktop and mobile view.
Related
The code that appears below creates the following layout:
The important part is that the content, although centered on the screen when not overflowing, never overlaps the navbar and has its own scrollbar:
The problem is that this layout is achieved with the help of padding (marked by a comment in the code below), which results in the additional scrollbar on the right of the screen.
How can I design the same layout that would have only one scrollbar - the one in the content?
Please note that the solution should not break the following details:
The rounded corners and the shadow.
The title in the content block not participating in scrolling.
The image covering the whole scrollable content, so it scrolls together with the content.
In addition, it would be great if this can be achieved without as many nested div's as I have right now.
Edit: I am ready to go with the suggestion of #JHeth in the comments section. However, I would still be interested if someone can come up with an alternative design that does not rely on padding for centering.
Here is the code (CodePen):
* {
padding: 0;
margin: 0;
}
html {
font-size: 62.5%;
}
:root {
--navbar-height: 3rem;
}
.navbar {
width: 100%;
text-align: center;
font-size: 2rem;
line-height: var(--navbar-height);
background-color: lightgreen;
}
.centering {
position: absolute;
inset: var(--navbar-height) 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
& .auto-margin {
margin: auto;
// For scrollable content
display: flex;
max-height: 100%;
padding-bottom: calc(var(--navbar-height)); // Causes scrolling
}
}
.content-block {
display: flex;
flex-direction: column;
.title {
font-size: 2rem;
position: sticky;
}
.content-outer-container {
display: flex;
flex-direction: column;
overflow-y: auto;
border-radius: 1em;
box-shadow: 0 1em 2em rgba(black, 0.4);
.content-container {
width: 300px;
overflow-y: auto;
.content {
position: relative;
padding: 1em;
&:before {
content: "";
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background-position: center;
background-image:
url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg);
}
}
}
}
}
<div class="navbar">An Amazing Navbar</div>
<div class="centering">
<div class="auto-margin">
<div class="content-block">
<div class="title">My Title</div>
<div class="content-outer-container">
<div class="content-container">
<div class="content">
<h1>Line1</h1>
<h1>Line2</h1>
<h1>Line3</h1>
<h1>Line4</h1>
<h1>Line5</h1>
</div>
</div>
</div>
</div>
</div>
</div>
simply remove max-height:100%; to .centering .auto-margin and it'll works!
.centering .auto-margin {
margin: auto;
display: flex;
/* max-height: 100%; */
padding-bottom: calc(var(--navbar-height));
}
First off I am very new to CSS and following an online course.
I am trying to create a navigation bar that changes from row to column when going into mobile. I am using flexbox and #media queries for that however, it seems like my code does not make any change to the navigation direction when going to mobile. Please help! ]
.container {
display: flex;
color: white;
justify-content: flex-end;
}
.box {
width: 90px;
height: 3rem;
margin: 0.5rem;
background-color: black;
text-align: center;
}
.box-four {
width: 100px;
}
#media screen and (max-width: 600px) {
.container {
flex-direction: row;
justify-content: center;
flex-grow: 2rem;
flex-wrap: wrap;
flex-basis: 10%;
}
}
Can't say exactly what problems you are having without seeing some example HTML to work with but at first glance it seems you should be using flex-direction:column for your mobile view.
Note well: What is in the media query is your mobile styles in this case. You can tell because you have specified max-width which means that it will apply to all screen sizes below the width provided (600px).
See the below as an example which incorporates your provided CSS with some basic HTML I made. (Resize the browser window to test).
.container {
display: flex;
color: white;
}
.box {
width: 90px;
height: 3rem;
margin: 0.5rem;
background-color: black;
text-align: center;
}
.box-four {
width: 100px;
}
#media screen and (max-width: 600px) {
.container {
flex-direction: column;
justify-content: center;
flex-grow: 2rem;
flex-wrap: wrap;
flex-basis: 10%;
}
}
<div class="container">
<div class="box">Entry 1</div>
<div class="box">Entry 2</div>
<div class="box">Entry 3</div>
<div class="box">Entry 4</div>
</div>
You can also read more about flex-direction at the MDN Web Docs
Display flex works great as the variable height columns all equal one another. I have not really used CSS for many years. So I do apologise if I have missed something obvious. Any help would be massively appreciated.
.row {
display: flex;
}
I followed some S-O posts to vertically align text, however, I cannot seem to replicate the shared success of others.
.row {
display: flex;
justify-content: center;
align-items: center;
}
Works however not as I intended, the individual divs bgs no longer stretch, to equal heights.
I read some further posts and css-tricks, stumbled across align-self stretch.
[class*='col-'] {
float: left;
padding-right: 28px;
border: 1px solid red;
align-self: stretch;
}
.row {
display: flex;
justify-content: center;
align-items: center;
}
This unfortunately seems to go back to my first image.
I read another post, highlighting the use of flex:1.
The columns jump around, in a manner, I am not accustomed to.
.row {
display: flex;
justify-content: center;
align-items: center;
}
[class*='col-'] {
float: left;
padding-right: 28px;
border: 1px solid red;
flex: 1;
}
If i remove the justify-content and align-items. That does not really help me either.
Here is my markup:
<div class='row'>
<div class='col-m-1 col-t-1 col-d-1' style='background-color:blueviolet;'>
<a href="" id='navigation_link'>☰</a>
</div>
<div class='col-m-1 col-t-2 col-d-2' style='background-color: blue;'>
<h1>Header</h1>
</div>
<div class='col-m-4 col-t-5 col-d-9 t-end' style='background-color:blueviolet;'>
<form>
<input type='search' placeholder='Search Today' minlength='100'>
<input type='submit' value='Search'>
</form>
</div>
</div>
Here is snapshot of my css
#media only screen and (min-width: 768px) {
h1 {
font-size: 2.4rem;
/* =24px */
}
.col-d-1 {
width: 8.33%;
}
.col-d-2 {
width: 16.66%;
}
.col-d-3 {
width: 25%
}
.col-d-4 {
width: 33.33%
}
.col-d-5 {
width: 41.66%
}
.col-d-6 {
width: 50%;
}
.col-d-7 {
width: 58.33%;
}
.col-d-8 {
width: 66.66%;
}
.col-d-9 {
width: 75%;
}
.col-d-10 {
width: 83.33%;
}
.col-d-11 {
width: 91.66%
}
.col-d-12 {
width: 100%;
}
[class*='col-'] {
float: left;
padding-right: 28px;
border: 1px solid red;
}
}
[class*='col-']:first-of-type {
padding-left: 16px;
}
[class*='col-']:last-of-type {
padding-right: 16px;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
For posterity, I managed to resolve this problem with the help of this S-O post.
You need to add display flex to the child items; then centre. Thus adding the below snippet to my original post remedies my issue.
.row [class*='col-'] {
display: flex;
align-items: center;
}
I have two DIV's, first one is auto width (the content), second one is fixed width.
When the screen gets too narrow/window scaled, the fixed width DIV goes on the top and becomes 100% width as well. I would like to replicate this, but I want the fixed DIV to go on the bottom, not top, when browser gets too narrow. How can I accomplish this? Thanks.
(Please check in 'Full-Page' mode)
.container-wrapper
{
overflow: hidden;
}
.fixed-right
{
overflow: hidden;
min-height: 100px;
min-width: 400px;
float: right;
}
.auto-left
{
overflow: hidden;
min-height: 100px;
}
.fancy
{
border-radius: 2px;
background-color:lightgray;
margin-left: 5px;
padding: 5px;
}
#media
only screen and (max-width: 764px), (min-device-width: 764px) and (max-device-width: 1024px)
{
.fixed-right
{
float: none;
width: auto;
margin-left: 0px;
margin-bottom: 5px;
}
}
<div class="container-wrapper">
<div class='fixed-right fancy'>
Fixed
</div>
<div class="auto-left fancy">
Auto
</div>
</div>
Try adding this into your #media-query;
.container-wrapper {
display: flex;
flex-direction: column-reverse;
}
Pretty easy, change the order of the Divs in the HTML DOM:
<div class="container-wrapper">
<div class="auto-left fancy">
Auto
</div>
<div class='fixed-right fancy'>
Fixed
</div>
</div>
The float right, will make it as you wanted on desktop
You can use display: flex; on your wrapper. Switch the flex-direction in the two different viewports. Note this solution becomes more flexible if you add more elements to the wrapper, being able to set the order.
Then define the order of the divs.
in the large view you set the right div to order 1
in smaller you set it to 0, that means it will be first (on top)
.container-wrapper {
display: flex;
flex-direction: row;
}
.fixed-right {
overflow: hidden;
min-height: 100px;
min-width: 400px;
order: 1;
}
.auto-left {
overflow: hidden;
min-height: 100px;
}
.fancy {
border-radius: 2px;
background-color: lightgray;
margin-left: 5px;
padding: 5px;
}
#media only screen and (max-width: 764px),
(min-device-width: 764px) and (max-device-width: 1024px) {
.container-wrapper {
flex-direction: column;
}
.fixed-right {
width: auto;
margin-left: 0px;
margin-bottom: 5px;
order: 0;
}
.fancy {
margin-left: 0;
}
}
<div class="container-wrapper">
<div class='fixed-right fancy'>
Fixed
</div>
<div class="auto-left fancy">
Auto
</div>
</div>
I have a 'card' like html component, that it displays this way:
+------+-----------------+-------+
| 1 | 2 | 3 |
+------+-----------------+-------+
And when I go under the 720px I want that became like this:
+------+-------------------------+
| | 2 |
| 1 +-------------------------+
| | 3 |
+------+-------------------------+
I am having difficulties to figure out how can I achieve this with flexbox. I am wondering if it is the right solution for this kind of problem.
the initial state, is currently like this:
<div class="card">
<div class="status"></div>
<div class="title">Tryout.it</div>
<div class="details">156 emails</div>
<div class="action"><button>go</div>
</div>
and my CSS something like this:
.card {
margin: 10px;
min-width: 320px;
min-height: 42px;
background-color: white;
border: 1px solid #eee;
border-radius: 6px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 9px 10px;
}
.card .status {
width: 30px;
height: 24px;
}
.card .title {
flex-grow: 1;
}
You cannot achieve this with flexbox with your current HTML structure.
(In the future you can use the grid layout for this, but at the moment it is not supported.)
However, if you place 2 and 3 in a container you can do this:
.card {
margin: 10px;
border: 1px solid #eee;
border-radius: 6px;
display: flex;
justify-content: space-between;
padding: 9px 10px;
}
.card .avatar {
width: 30px;
height: 24px;
}
.card .container {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.card .container .name {
width: 50%;
}
.card .container .presentation {
flex-grow: 1;
}
#media (max-width: 720px) {
.card .container .name {
width: 100%;
}
}
<div class="card">
<div class="avatar">
x
</div>
<div class="container">
<div class="name">Mr. Potato</div>
<div class="presentation">Hi!</div>
</div>
</div>
You can use CSS media query to apply a different style your div's at a certain screen size.
#media screen and (max-width: 720px) {
.css-class {
}
#css-id {
}
}
#ciaoben, Since you disappeared after asking you question, I'll provide an answer based upon the logic that the .title and .details blocks are meant to be blocks 2 and 3 from your diagram and that the .action is meant to be a fourth block on the opposite side.
Simply put, you need another layer for your HTML structure before you can apply the CSS to adjust it. You would wrap the blocks you want to have the appearance of altered in another DIV.
Once you have the HTML structure updated, it's a simple matter of applying a #media query to adjust the appearance at the desired screen size.
Please see my example below. Note: I updated your CSS to a more streamlined flexbox approach. Further, it applis display: flex to the .action block because, as I noted above, you don't identify it at all.
.card {
margin: 10px;
min-width: 320px;
min-height: 42px;
background-color: white;
border: 1px solid #eee;
border-radius: 6px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 9px 10px;
}
.card .status {
width: 30px;
}
.card .stretchit, .card .action {
-webkit-flex: 1;
flex: 1;
}
#media screen and (min-width: 720px) {
.card .stretchit {
display: flex;
}
.card .title, .card .details {
-webkit-flex: 1;
flex: 1;
}
}
<div class="card">
<div class="status"></div>
<div class="stretchit">
<div class="title">Tryout.it</div>
<div class="details">156 emails</div>
</div>
<div class="action"><button>go</button></div>
</div>