Impossible to get simple layout done!

I am fighting with the .css style sheets and the simple order of a layout I want to get done.

I can get done the DESKTOP version, but then it doesn’t fit for the mobile version.
Or the opposite.

Create a page
–> using the PageBuilder
–> I create a row
–> the row should align right after the top bar (menu area)
–> Edit Row Settings
–> Top Bottom Padding 0px

If am using these padding settings, it looks fine for the mobile version.
But the content is behind the menu when using the Desktop version.
Which is useless.

So how the hell is this them or the css setup to make this work for both?
The mobile plus the desktop version.

Getting really frustrated with this!

meaning… PADDING ISSUES… PADDING ISSUES… PADDING ISSUES… between the Desktop version and the mobile version.

When ever I say: 0px padding on the top… it works for mobile
but with the same 0px padding, the Desktop version is fudged up.

Because the content is behind the menu… this shoot just doesn’t work and there is no documentation or code help that specifies what freaking colums, divs, content wrappers or what ever have to be changed…

Where to find all that stuff ?
And what’s the code to fix it ?

Hello there,

But the content is behind the menu when using the Desktop version. Which is useless.

Could you please share the link to that page, so I can inspect and troubleshoot?

Regards,
Kharis

Here is the VIDEO to show that freaking issue:

Hello there,

To prevent the content gets overlayed by the header bar, try adding the following custom CSS code:


.site-header,
.site-header.fixed {
  position: relative !important;  
}  

For other padding issues as seen on the video, please share the link to those pages, so I can inspect and troubleshoot it from the web browser I am using.

Regards,
Kharis

The menu thing is actually an issue which we’ll fix tomorrow.

The padding thing isn’t an issue per se, at least from what I can see in the video. Your default pages have padding and that padding contains your header images, thus creating the gaps. Can probably be easily customized with some negative margins applied just for the images (so that it doesn’t affect the rest of the content on the page) but, as Kharis mentioned, we’ll need a list of those pages.

a list of those pages…

I want to create ONE LAYOUT… that works for Desktop and mobile.
Once the Layout is developed and works… I am going to use it on all pages.

you see?

Since I am using the standard Sydney Pro Theme… all I need is ONE LAYOUT with the custom .css code.

That’s it… meaning… you don’t need any URL… because you can run a test on one of your demo pages.

I really have no clue why it’s so hard to create one simple LAYOUT?

Since weeks I am posting videos explaining the SIMPLE LAYOUT I want to create.
And since weeks, it’s impossible to get this done.

What is so hard to understand from this basic simple structure?

From Top to bottom:

  1. MENU
  2. IMAGE
  3. HEADLINE
  4. CONTENT

rinse and repeat… one Layout with no padding issues, no gaps either between the columns.
No gaps, no margins, no padding on the top, on the bottonm, on the left, on the right !

Can you not setup one layout… including the .css style code.
Upload that Layout somewhere on your server… provide a download link inlcuding the .css file.

Here again the Video I posted weeks ago:

sorry to be angry about that… but you have no clue how frustrating it is…asking since weeks for one simple Layout that should work for Desktop and Mobile… and until today… no results.
Nothing than failures…

also … please realize… once you are logged in… as the admin in WordPress… of course while you are working as a loged in user… WordPress adds the admin bar on top of the browser…

and it would be also nice… to have it fixed… so that it looks the same as if you would not be logged in…

but that being said… I am looking forward to see a fully functional version … a Layout Download file that simple works for all PAGES I create in WordPress.

And yes… again… I refer to pages… and not posts.
Thanks

The menu issue should be solved now. You can update and remove Kharis’s code. Clear your cache/refresh the page if needed.

Now going back to your layout issue. Let’s keep things simple and concise and I’m sure we’ll come to a conclusion shortly.

Simply making a layout for you won’t work because for example some third party widgets (like the ones from Siteorigin) might have their own padding. And we need to see that and write custom code specifically for them, that’s why we were asking to see examples.

I’m looking at this page here because I saw you were showing it in the video: http://www.rieder-enterprises.com/geld-leihen/sofort/
If I shrink it I see this: https://snag.gy/GoJS96.jpg.
On desktop I see this: https://snag.gy/6RhaTY.jpg
What changes are needed here? Mark on the screenshot if it’s easier.

are you saying I should update the Theme first?
Re-download and install the latest version?

You don’t need to re-download, just go to Appearance > Themes and you’ll see a notice to update the theme in case you’ve activated your license. After that (or before, doesn’t matter) remove the code Kharis posted from your custom CSS.

I see you actually updated. So both Kharis’s code and the one where you set header-clone to 0 height would need to be removed. Or you can keep them if you like, I’m not noticing any difference.

test

mobile version on the url you posted before!

please remove the gaps on the left and right, from the
IMAGE and
TITLE

Remove what you’ve added for div#content > div.content-wrapper.container

Add this:


@media only screen and (max-width: 600px) {
     .panel-grid:first-of-type .widget_sow-slider {
          margin: -30px -15px 0;
     }
     .panel-grid:first-of-type .widget_sow-headline {
          margin: 0 -15px;
     }
}

ok. I added another widget on top of it.
The SiteOriginImage Widget.

Same issue appears now on that… check it out… everything else works…
just need to add the code for the SiteOriginImage Widget.

can you please take another look and remove the gaps on the side of the OriginImage ?
you can clearly see it on the mobile verison, once you pull up the page again.

Sorry for the delay, I was away.
Let’s do it like this: click on your widget to edit it, go to Attributes and add a class, let’s say mycustomclass.

Then you can change the CSS to this:


@media only screen and (max-width: 600px) {
     .mycustomclass {
          margin: -30px -15px 0;
     }
     .panel-grid:first-of-type .widget_sow-headline {
          margin: 0 -15px;
     }
}

In case you want to have it exactly like you have it now (image and after that the slider), add a second class for the slider image and do it like this:


@media only screen and (max-width: 600px) {
     .mycustomclass2 {
          margin: 0 -15px 0;
     }
}

Notice the 0 instead of -30px, that’s so that you don’t overlap them.

//Edit: so for every page where you want the code to take effect, you just need to add the class.

also… on the mobile version… it looks like you can scroll left and right…
that should be removed as well!

and one more thing… I actually disagree, that it wouldn’t work to setup ONE PAGE on your own Demo-Version. Once it’s setup, you should provide a download link to load that template.

You can always provide the custom CSS code as well.

If you guys do not want to do that… I can tell you… it’s really bad for customers and yourself.
I am crafting since weeks on one stupid layout… and look where we are?

Just using the forum… it’s to slow, to complicated… it’s not going anywhere… and I am losing my patient getting this done.

Keep in mind… a layout and template has to go quick… or at least… you should have templates like I recommended… customers like me, are not interested at all to write custom code for css.

All we want… is flexibility in the layout, and get things done fast.
I hope that makes sense!

So again… please provide just one simple template or layout, in which the layout I’ve been asking to do simple works.

And here is the entire CSS Code I’ve been using so far, following all your responses. Still not done.

/* No padding on Content Wrapper*/

div#content > div.content-wrapper.container {
    padding-top: 0px !important;
 
}

@media only screen and (max-width: 600px) {
     .panel-grid:first-of-type .widget_sow-slider {
          margin: -30px -15px 0;
 
     }
     .panel-grid:first-of-type .widget_sow-headline {
          margin: 0 -15px;
     } 
	
}
  
  

.no-col-padding .panel-grid-cell {
    margin-bottom: 0px !important;
}

/* No padding on Header*/
div.header-clone {
height: 0px !important;
}

/* Specifies no padding on the content wrapper */
header#masthead.site-header,
.site-header.fixed {
  position: relative !important;  
} 

/* Removes unwanted horizontal scroll */
body {
    overflow-x: hidden;
}

/* FONTS - FONTS - FONTS */
p {
  	font-weight: 400;
	font-family: "Roboto", Georgia, Serif;
	
	font-size: 18px;
    color: #231900;
    text-align: justify;
    text-justify: inter-word;
    word-break: keep-all;
    letter-spacing: -0.2px;
    word-spacing: 2px;
    line-height: 21px;
   padding-top: 10px;
   margin-top: 0px;
  text-indent: 0px;
}

strong {
  font-family: "Roboto", Georgia, Serif;
    font-weight: 500;
  color: #231900;
  	font-size: 18px;
    color: #231900;
    text-align: justify;
    text-justify: inter-word;
    word-break: keep-all;
    letter-spacing: -0.2px;
    word-spacing: 2px;
    line-height: 21px;
   padding-top: 10px;
   margin-top: 0px;
  text-indent: 0px;
}

/* Specifies the preformatted body text */
body pre {
	white-space: normal;
  color: #231900;
	font-weight: 500;
	font-family: "Roboto", Georgia, Serif;
	font-style: normal;
	font-size: 18px;
	word-break: keep-all;
    text-align: justify;
    text-justify: inter-word;
    color: black;
    letter-spacing: -0.5px;
    word-spacing: 0.5px;
  line-height: 21px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

/* Specifies the H1 Font for each post  */
h1.sow-slider-image-wrapper {
line-height: 10px;
  color: white;
}

/* Specifies H1 Font */
h1.sow-headline {
font-family: 'Oswald', sans-serif;      
	white-space: normal;
    letter-spacing: -1.5px;
    word-spacing: 2px;
   	font-weight: 700;
	font-style: normal;
	font-size: 28px;
	text-align: left;
	text-justify: inter-word;
	word-break: keep-all;
  color: white;  
  padding-left: 0px !important;    
}

h2 {
    font-family: 'Oswald', sans-serif;
    color: #231900;
    white-space: normal;
    letter-spacing: -1.5px;
    word-spacing: 2px;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    text-align: center;
    text-justify: inter-word;
    word-break: keep-all;
    /* margin-top: 0px; */
    margin-right: 0px;
    margin-bottom: 2px;
    margin-left: 0px;
    border-top-width: 1px;
    /* border-top-style: solid; */
    border-top-color: #000000;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
    margin-top: 20px;
    /* padding-top: 20px; */
    /* padding-bottom: 10px; */
  }

h3 {
    font-family: 'Oswald', sans-serif;   
    color: #231900;
	white-space: normal;
    letter-spacing: -1.5px;
    word-spacing: 2px;
   	font-weight: 400;
	font-style: normal;
	font-size: 28px;
	text-align: left;
	text-justify: inter-word;
	word-break: keep-all; 
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 2px;
    margin-left: 0px;

   
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000000;
    
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
   
  margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
  }

h4 {
    font-family: 'Oswald', sans-serif;   
    color: #231900;
	white-space: normal;
    letter-spacing: -1.5px;
    word-spacing: 2px;
   	font-weight: 400;
	font-style: normal;
	font-size: 28px;
	text-align: center;
	text-justify: inter-word;
	word-break: keep-all; 
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 2px;
    margin-left: 0px;

   
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000000;
    
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
   
  margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
  }

h5 {
    font-family: 'Oswald', sans-serif;   
    color: #231900;
	white-space: normal;
    letter-spacing: -1.5px;
    word-spacing: 2px;
   	font-weight: 400;
	font-style: normal;
	font-size: 28px;
	text-align: center;
	text-justify: inter-word;
	word-break: keep-all; 
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 2px;
    margin-left: 0px;

   
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000000;
    
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
   
  margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
  }

h6 {
    font-family: 'Oswald', sans-serif;   
    color: #231900;
	white-space: normal;
    letter-spacing: -1.5px;
    word-spacing: 2px;
   	font-weight: 400;
	font-style: normal;
	font-size: 28px;
	text-align: center;
	text-justify: inter-word;
	word-break: keep-all; 
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 2px;
    margin-left: 0px;

   
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #000000;
    
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
   
  margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
  }

li {
  	font-weight: 400;
	font-family: "Roboto", Georgia, Serif;
}

/* Specifies blockquote */

.hentry blockquote {
    background-color: #ffd119;
    font-family: 'Oswald', sans-serif;
    color: #231900;
    white-space: normal;
    letter-spacing: -1.5px;
    word-spacing: 2px;
    font-weight: 400;
    font-style: normal;
    font-size: 38px;
    text-align: center;
    text-justify: inter-word;
    word-break: keep-all;
    /* margin-top: 0px; */
    margin-right: 0px;
    margin-bottom: 2px;
    margin-left: 0px;
    border-top-width: 1px;
    /* border-top-style: solid; */
    border-top-color: #000000;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
    margin-top: 20px;
    /* padding-top: 20px; */
    /* padding-bottom: 10px; */  
  
  
}

.hentry blockquote:before,
.hentry blockquote:after {
position:absolute;
width:48px;
height:48px;
content:".";
font-size:0;
}

ins.adsbygoogle {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 00px;
  margin-top: -25px;
  margin-bottom: 0px;
  text-align: justify;
  text-align: center;  
  margin-left: auto;
  margin-right: auto;
  }

/* Specifies LINKS */
/* unvisited link */
a:link {
    color: blue;
}

/* visited link */
a:visited {
    color: blue;
}

/* mouse over link */
a:hover {
    color: red;
}

/* selected link */
a:active {
    color: blue;
}

/* Breadcrumbs Span */

div.breadcrumb {
  padding-top: 7px !important;  
  padding-bottom: 5px !important;
  	font-weight: 400;
	font-family: "Roboto", Georgia, Serif;
	font-style: normal;
	font-size: 15px;
  }

p#breadcrumbs {
  	white-space: normal;
	font-weight: 400;
	font-family: "Roboto", Georgia, Serif;
	font-style: normal;
	font-size: 15px;
  padding-top: 0px !important;
  margin-bottom: 10px !important;
 }

strong.breadcrumb_last {
		font-weight: 400;
	font-family: "Roboto", Georgia, Serif;
	font-style: strong;
	font-size: 15px;
    color: #3c6f00;	
}

/* Specifies the color of the 3 bars in the mobile menu */
div.btn-menu {
    color: black;
}

.widget select {
    max-width: 100%;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
    color: #1e251e;
    background-color: #ffffff;
    /* border: 2px solid rgb(43, 43, 41); */
    height: 30px;
    padding: 4px 20px;
    border-radius: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    font-size: 14px;
}

.sow-form-field input.sow-text-field {
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 100%;
    border-radius: 0;
    width: 100%;
    height: 30px;
}

figure.wp-caption > figcaption.wp-caption-text {
  font-family: "Roboto", Georgia, Serif;
    margin-top: -20px;
    margin-bottom: 0px;
    text-align: left;
    margin-left: 10px;
    font-size: 16px;
}

div.sow-slider-image-wrapper {
  padding-left: 0px !important;  
  padding-right: 0px !important;  
  padding-bottom: 0px !important;  
  
}
  
div.panel-grid-cell 
{

  padding-bottom: 0px !important; 
  margin-bottom: 0px !important; 
}

div.siteorigin-panels-stretch.mob-pad-0.panel-row-style 
{
  padding-bottom: 0px !important;   
  margin-bottom: 0px !important; 
}