Forums

Help with fixing css to stop a block resizing at low res and overlapping

Permalink
Hi I'm having an issue after making my page width auto to match desktop resolution.

http://www.artificialorigins.com/conc/...

I have 3 cta blocks below the intro image which are fine on 1920x800 but if you use alt-mousewheel to zoom you will see the problem I am having. Ideally I would like the each cta to center horizontally to the concrete edit pane (due to an issue with columns in conc) but I am also having difficulty getting that to run fluidly if at all, let alone the resizing issue.

The css handling it is below, I must be doing something wrong, could it be the conflict with the entire page width being set to auto? There must be a logical way to counteract this, I've tried using percentages, alignments but no joy so far.

/** CTA Styles ****************************************************/
/******************************************************************/
#ctaShell { margin: 128px 0 0 0;
  background: url(../img/bgCtaShellll.jpg) no-repeat center center fixed;  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
   .ie7 #ctaShell .container { padding-bottom: 28px; }
      .cta { display: block; position: relative; width: 220px; height: 136px; background: url(../img/bgCta.jpg) no-repeat; overflow: hidden; margin: 28px 0 28px 4px; padding: 15px 10px 10px 80px; float: left; }
      .cta:first-child { margin-left: -3px;  }
         .ctaTitle { font-size: 18px; }
         .blue .ctaTitle { color: #f0b470; }
         .red .ctaTitle { color: #d90a67; }
Viewing 15 lines of 20 lines. View entire code block.


Any ideas?

Thanks
BillboBagend
 
BillboBagend replied on at Permalink Reply
BillboBagend
Any one out there? :) I still have the issue with getting my cta blocks set up to work with my RWD. Any advice what so ever would be fantastic as I am at a loss of how to proceed.

Many thanks
keeasti replied on at Permalink Reply
keeasti
I think your problem is being created by the use of 'layouts' in C5.
Would you be able to do them without using this feature?
BillboBagend replied on at Permalink Reply
BillboBagend
I think it could be possible, How would I go about disabling this feature to test? I didn't even think concrete might be causing the issue
BillboBagend replied on at Permalink Reply
BillboBagend
Okay I think I follow you now, so the use of columns is messing with the layout/css? If so is there an easy way I could enable a 3 column area for the cta or something similar? My first thought was to directly edit the html of the page and add them in but this isn't possible in concrete as far as I am aware.

I have the same issue with my updates page and both are using columns so a workaround would be fantastic
keeasti replied on at Permalink Reply
keeasti
You probably need to edit the relevant theme template + associated css.

From what I can see you have used the Simply Grunge theme as the base for your site and it doesn't seem to suffer form the same problem. I'd start by looking at its code to see how it differs from your version.
BillboBagend replied on at Permalink Reply
BillboBagend
Yes what caused this is that I have made the entire site width 100% of the browser window. This is what has caused the problem and I need to figure out what I need to do in the css to get its placement to remain how it looks on 1920x1080.

Even if I were to scrap the cta blocks and use something else the issue is still there with iframes and any other blocks added in concrete.
A rather confusing dilemma!
SheldonB replied on at Permalink Reply
SheldonB
in chrome or Firefox you can right click and go to something like Inspect elements

you can turn on and off css code
* when i knocked out width 25% on your's it fixed it

but there is no center for the blocks so they will shoot to the left

I think it might be easier to copy and paste each bock into 1 block so you only have to center 1 block instead of 3

*I hope this helps you its kind of what you are trying to do
http://jsfiddle.net/q2ZAb/