font-size

[s_cristina]

Hi all, I would like to fix the body stuff with my navigation line to be in line while doing the window smaller or having an other size of window. But i have no idea how i have to do this. Thanks for help!

Here is a link to a screenshot to understand more what i need:
https://drive.google.com/open?id=0B6tIrM-3L0xgdkRBSTkzOGU0N0U

[Atelierbram]

Can you show the relevant parts of your code in a demo? Help us help you.

[s_cristina]

like this?
link: http://codepen.io/anon/pen/NpNpgZ

[Atelierbram]

The image has position: absolute and it’s values for top, left, width and height are calculated and dynamically updated with javaScript, which makes it tricky to interfere with. An alternative could be to adjust the right- and left padding on the menu within media-queries, something like this to make it all line up:

@media (min-width: 640px) and (max-width: 768px) {
  .menu-controller .menu-bar--wrapper {
    padding-left: 1.75em !important;
    padding-right: 2.25em !important;
  }
}

@media (max-width: 639px) {
  .menu-controller .menu-bar--wrapper {
    padding-left: .25em !important;
    padding-right: 1.25em !important;
  }
}

[s_cristina]

Thanks I will try :)

[s_cristina]

It doesn’t work.. on my Macbook it looks fine but if I look on the iMac it doesn’t look like I wish..
Below I have the screenshots with the Informations of the iMac screen size and how it looks on it.
Link: https://drive.google.com/open?id=0B6tIrM-3L0xgWlQwMXFfSkx5MjQ

These CSS codes I created. I don’t know, but maybe one of these could be the reason why it doesn’t work…

CSS:

//all pages
 #page { height: 580px !important; 
 max-width: 1600px;}

// Welcome Page //
//Logo Spacer

#block-yui_3_17_2_2_1488320407672_10006.sqs-block.image-block.sqs-block-image{
padding-top: 580px;}

#block-yui_3_17_2_6_1487421600332_7750.sqs-block.spacer-block.sqs-block-spacer{
  height: 70px;
}

div#canvas{
background-color: #fff !important;

}
#canvas {
    max-width: none !important;
  }
.canvas-style-normal #canvas {
    margin: 0;
}
#collection-58a613e9ebbd1a8a0012ce20{
background-color: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.menu-bar--wrapper{
    max-height: 60px !important;
   }
.class.main-nav.sqs-frontend-overlay-editor-widget-host {
  visibility: hidden;
  display: none;
  }
#header { 
  display: none;
   }
.menu-nav li:after {
  transform: rotate(0deg)!important; 
  -webkit-transform: rotate(0deg) !important ;
   }

.menu-controller {
    text-align: left !important ;
    position: absolute;
    height: 60px !important;
   }
.menu-nav {
  border: none !important;
   }
.main-menu.menu-nav.opened {
    text-align: center !important ;
   }
#footer {
  text-align: left !important;
  background-color: white !important;
}
.category-menu.menu-nav.opened.back {
  text-align: center !important;
  }
.menu-bar.content-limiter {
 border-bottom: 1px solid #ccc !important;
 height: 60px !important;
    }

.horizontalrule-block.sqs-block-horizontalrule hr {
  background-color: #ccc !important;

}
/*.horizontalrule-block.sqs-block-horizontalrule  {
 padding-top: 10px;
}*/
.menu-bar .menu-btn .icon-menu .bar {
    height: 1px !important;
  }
.menu-bar .menu-btn .icon-menu {
  width: 24px !important;
  height: 15px !important;
}

#yui_3_17_2_6_1486573338483_10355{
    text-align: justify;
  }
// Home Page //
#collection-588ba34a8419c2c2b4f953c0.home.blog.post-001-drone.group-blog {
 position: fixed;
}
#block-yui_3_17_2_3_1485546142909_5076.sqs-block.image-block.sqs-block-image {
   padding-top: 80px; 
   padding-left: 13px;
   padding-right: 13px;

}
.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img {
  height: 527px;
 } 
.info-footer-wrapper.clear {
 visibility: hidden; 
}
//primos bild
#block-yui_3_17_2_3_1486849980533_6499.sqs-block.spacer-block.sqs-block-spacer{
  height: 110px;
}
// primos text
#block-yui_3_17_2_3_1486849980533_7106.sqs-block.spacer-block.sqs-block-spacer{
  height: 96px;
}
//antena bild
#block-yui_3_17_2_5_1486573338483_8065.sqs-block.spacer-block.sqs-block-spacer
{
  height: 110px;
}
//antena text
#block-yui_3_17_2_6_1485946416025_8600.sqs-block.code-block.sqs-block-code
{
  height: 96px;
}

//Ladeira bild
#block-yui_3_17_2_11_1486323133230_18430.sqs-block.spacer-block.sqs-block-spacer {
  height: 110px;
  }
//ladeira text
#block-yui_3_17_2_11_1486323133230_19025.sqs-block.spacer-block.sqs-block-spacer.sized.vsize-1 {
    height: 96px;
}
//lugarinho bild
#block-yui_3_17_2_3_1486573738321_10333.sqs-block.spacer-block.sqs-block-spacer{
  height: 110px;
}
// lugarinho text
#block-yui_3_17_2_3_1486573738321_10914.sqs-block.spacer-block.sqs-block-spacer.sized.vsize-1{
  height: 96px;
}

// farmacia bild
#block-yui_3_17_2_4_1486573738321_7724.sqs-block.spacer-block.sqs-block-spacer{
  height: 110px;
}
// farmacia text
#block-yui_3_17_2_4_1486573738321_8306.sqs-block.spacer-block.sqs-block-spacer.sized.vsize-1{
  height: 96px;
}
// umbau bild
#block-yui_3_17_2_5_1486573738321_10197.sqs-block.spacer-block.sqs-block-spacer{
  height: 110px;
}
// umbau text
#block-yui_3_17_2_5_1486573738321_10784.sqs-block.spacer-block.sqs-block-spacer.sized.vsize-1{
  height: 96px;
}
// neubau bild
#block-yui_3_17_2_6_1486573738321_12592.sqs-block.spacer-block.sqs-block-spacer{
  height: 110px;
}
// neubau text
#block-yui_3_17_2_6_1486573738321_13168.sqs-block.spacer-block.sqs-block-spacer.sized.vsize-1{
  height: 96px;
}
// bildgallerie nach unten verschoben

.sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-1 .sqs-gallery-design-grid-slide:nth-child(12n + 2)
{
 padding-top: 230px;
}




//anfang houses in calheta
// text padding
.sqs-block.html-block.sqs-block-html
{
    padding-top: 10px;
    padding-bottom: 0px;
}
//bilder allgemein
.sqs-block.image-block.sqs-block-image
{
    padding-top: 80px;
    padding-bottom: 0px;
}
//bilder, text und Linien links
//b1
#block-b2f07c212fb9c5ff8507.sqs-block.image-block.sqs-block-image
{
    padding-left: 16px;
    padding-right: 44px;
    padding-bottom: 0px;
}
//t1
#block-yui_3_17_2_3_1486844386591_41356.sqs-block.html-block.sqs-block-html{
    padding-left: 16px;
    padding-right: 44px;
} 
//l1
#block-yui_3_17_2_3_1486844386591_32643.sqs-block.horizontalrule-block.sqs-block-horizontalrule
{
    padding-left: 16px;
    padding-right: 44px;
    padding-bottom: 0px; 
} 
//b2
#block-f7e9f29f97741ebae87b.sqs-block.image-block.sqs-block-image{
    padding-left: 16px;
    padding-right: 44px;
    padding-bottom: 0px;
}
//t2
#block-yui_3_17_2_3_1486844386591_47386.sqs-block.html-block.sqs-block-html{
    padding-left: 16px;
    padding-right: 44px;
} 
//l2
#block-yui_3_17_2_3_1486844386591_36878.sqs-block.horizontalrule-block.sqs-block-horizontalrule
{
    padding-left: 16px;
    padding-right: 44px;
    padding-bottom: 0px; 
}

//bilder,text und linien mitte
//b1
#block-fef836b2f8c00ff8eaf2.sqs-block.image-block.sqs-block-image
{
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 0px;
}
//t1
#block-yui_3_17_2_3_1486844386591_11365.sqs-block.html-block.sqs-block-html{
    padding-left: 30px;
    padding-right: 30px;
} 
//l1
#block-yui_3_17_2_7_1486423244386_17141.sqs-block.horizontalrule-block.sqs-block-horizontalrule
{
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 0px; 
} 
//b2
#block-21ea7339f717757c912f.sqs-block.image-block.sqs-block-image
{
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 0px;
}
//t2
#block-yui_3_17_2_3_1486844386591_49564.sqs-block.html-block.sqs-block-html{
    padding-left: 30px;
    padding-right: 30px;
} 
//l2
#block-yui_3_17_2_3_1486844386591_35473.sqs-block.horizontalrule-block.sqs-block-horizontalrule
{
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 0px; 
}
//bilder,text und linien rechts
//b1
#block-1ee58b99404dbddefa8b.sqs-block.image-block.sqs-block-image
{
    padding-left: 44px;
    padding-right: 16px;
    padding-bottom: 0px;
}
//t1
#block-yui_3_17_2_3_1486844386591_43642.sqs-block.html-block.sqs-block-html{
    padding-left: 44px;
    padding-right: 16px;
}
//l1
#block-yui_3_17_2_3_1486844386591_33831.sqs-block.horizontalrule-block.sqs-block-horizontalrule
{
    padding-left: 44px;
    padding-right: 16px;
    padding-bottom: 0px; 
}
//b2
#block-ebecd7698dd703790bb9.sqs-block.image-block.sqs-block-image
{
    padding-left: 44px;
    padding-right: 16px;
    padding-bottom: 0px;
}
//t2
#block-yui_3_17_2_3_1486844386591_51801.sqs-block.html-block.sqs-block-html{
    padding-left: 44px;
    padding-right: 16px;
}
//l2
#block-yui_3_17_2_3_1486844386591_36294.sqs-block.horizontalrule-block.sqs-block-horizontalrule
{
    padding-left: 44px;
    padding-right: 16px;
    padding-bottom: 0px; 
}
//b3
#block-yui_3_17_2_18_1485811966459_16973.sqs-block.image-block.sqs-block-image
{
    padding-left: 44px;
    padding-right: 16px;
    padding-bottom: 0px;
}
//t3
#block-yui_3_17_2_3_1486844386591_54103.sqs-block.html-block.sqs-block-html{
    padding-left: 44px;
    padding-right: 16px;
}
//l3
#block-yui_3_17_2_3_1486844386591_55583.sqs-block.horizontalrule-block.sqs-block-horizontalrule
{
    padding-left: 44px;
    padding-right: 16px;
    padding-bottom: 0px; 
}

//ende houses in calheta

//gallery
.sqs-lightbox-slideshow.sqs-gallery-design-stacked { 
background-color: white;
}

a.sqs-lightbox-previous{
  top: 4% !important;
  color: transparent !important;
    cursor: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjIzcHgiIHZpZXdCb3g9IjAgMCAzMiAyMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMjMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMzEuNDA1LDEwLjc1IDMuNDY2LDEwLjc1IDEyLjYxNSwxLjYwMSAxMS41NTUsMC41NCAwLjU5NSwxMS41IDExLjU1NSwyMi40NiAxMi42MTUsMjEuMzk5IDMuNDY2LDEyLjI1IDMxLjQwNSwxMi4yNSAiLz48L2c+PC9zdmc+), pointer !important;

}

a.sqs-lightbox-next{
  right: 47% !important;
   top: 4% !important;
  color: transparent !important;
    cursor: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgd2lkdGg9IjMyIiBoZWlnaHQ9IjIzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIHRyYW5zZm9ybT0icm90YXRlKC0xNzkuOTEzNTc0MjE4NzUgMTUuNTc5ODQ0NDc0NzkyNDgsMTEuMDc5ODQzNTIxMTE4MTY2KSAiIGlkPSJzdmdfMSI+PHBvbHlnb24gcG9pbnRzPSIzMC45ODQ4NDQxMTgzNTY3MDUsMTAuMzI5ODQzNDMxNzExMTk3IDMuMDQ1ODQzNTExODE5ODM5NSwxMC4zMjk4NDM0MzE3MTExOTcgMTIuMTk0ODQzMjAyODI5MzYxLDEuMTgwODQzNTAyMjgzMDk2MyAxMS4xMzQ4NDM3MzY4ODY5NzgsMC4xMTk4NDM0NTMxNjg4NjkwMiAwLjE3NDg0MzQ2MDMyMTQyNjQsMTEuMDc5ODQzNDMxNzExMTk3IDExLjEzNDg0MzczNjg4Njk3OCwyMi4wMzk4NDI1MTYxODM4NTMgMTIuMTk0ODQzMjAyODI5MzYxLDIwLjk3ODg0MzU5OTU1Nzg3NyAzLjA0NTg0MzUxMTgxOTgzOTUsMTEuODI5ODQzNDMxNzExMTk3IDMwLjk4NDg0NDExODM1NjcwNSwxMS44Mjk4NDM0MzE3MTExOTcgIiBpZD0ic3ZnXzIiLz48L2c+PC9zdmc+), pointer !important;

}
.sqs-lightbox-previous:before{

    width: 550px !important;
    height: 696px !important;

}
.sqs-lightbox-next:before{

    width: 550px !important;
    height: 696px !important;

}

//menu test
.menu-nav.opened {
  cursor: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyM3B4IiBoZWlnaHQ9IjIzcHgiIHZpZXdCb3g9IjAgMCAyMyAyMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjMgMjMiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cG9seWdvbiBwb2ludHM9IjIxLjMwMSwwLjY0NiAxMS41LDEwLjQ0NyAxLjY5OSwwLjY0NiAwLjY0NiwxLjcgMTAuNDQ3LDExLjUgMC42NDYsMjEuMyAxLjY5OSwyMi4zNTQgMTEuNSwxMi41NTMgMjEuMzAxLDIyLjM1NCAKCTIyLjM1NCwyMS4zIDEyLjU1MywxMS41IDIyLjM1NCwxLjcgIi8+Cjwvc3ZnPgo="), auto !important;
}

.menu-nav.opened.category-menu.back {
  cursor: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjIzcHgiIHZpZXdCb3g9IjAgMCAzMiAyMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMjMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMzEuNDA1LDEwLjc1IDMuNDY2LDEwLjc1IDEyLjYxNSwxLjYwMSAxMS41NTUsMC41NCAwLjU5NSwxMS41IDExLjU1NSwyMi40NiAxMi42MTUsMjEuMzk5IDMuNDY2LDEyLjI1IDMxLjQwNSwxMi4yNSAiLz48L2c+PC9zdmc+"), auto !important;
}

.md-cat-opened {
  cursor: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjIzcHgiIHZpZXdCb3g9IjAgMCAzMiAyMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzIgMjMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMzEuNDA1LDEwLjc1IDMuNDY2LDEwLjc1IDEyLjYxNSwxLjYwMSAxMS41NTUsMC41NCAwLjU5NSwxMS41IDExLjU1NSwyMi40NiAxMi42MTUsMjEuMzk5IDMuNDY2LDEyLjI1IDMxLjQwNSwxMi4yNSAiLz48L2c+PC9zdmc+"), auto !important;
}
//sizing problem
.menu-bar--wrapper {
    box-sizing: border-box;
    padding-left: 100px !important;
    padding-right: 100px !important;
    margin: 0px auto;
  }
// try
@media (min-width: 640px) and (max-width: 768px) {
  .menu-controller.menu-bar--wrapper {
    padding-left: 1.75em !important;
    padding-right: 2.25em !important;
  }
}

@media (max-width: 639px) {
  .menu-controller.menu-bar--wrapper {
    padding-left: .25em !important;
    padding-right: 1.25em !important;
  }
}

[s_cristina]

Well it doesn’t work.. On my Macbook 12inch it looks fine and on the ipad too but on the iMac it doesn’t.
below is a link to screenshots how it looks on the iMac and the Information of the screen size.
Link: https://drive.google.com/open?id=0B6tIrM-3L0xgWlQwMXFfSkx5MjQ

I don’t know but maybe some of these CSS codes, which I added, could be the reason why it doesn’t work.
Link: http://codepen.io/s_cristina/pen/peboJL

If you like you can go to the page to see it better, I took out the password.

[Atelierbram]

Things which affect the layout on larger screens (, maybe not so much the code you added, but maybe more so the stuff that’s already there,) things like fixed positioned elements within other fixed positioned wrapper div’s, values for max-width set on some wrappers, like .row with negative left – and right margins. And so on, these things need to be dealt with but I don’t see the specific edits in your code doing that, which makes me wonder about your workflow. Do you use build in developer tools like ChromeDevTools? Best thing would be to make a reduced test case without all of the cruft.

Also, if you are interested and serious about learning (responsive) web-design, please let us know, and the people in this forum can direct you to a suitable approach with fitting resources.

[s_cristina]

I started to do the site on squarespace, then I wanted more then they had, so I connected the site with Espresso via SFTP and it seems like it doesn’t download all informations.
But now I am having problems with the different sizes of screens.
So yes it would be a big help to know more about responsive web-design.
The problem is that I know about html and Css coding but not about JS. I tried to understand JS but I really have difficulties.

[Atelierbram]

I think you just hit a wall, and need to think about what your best next step (back) in your development (in regards to webdesign) should be. Having no experience myself with the platform you are on, (so take this for what it is worth). The platform allows you to add in custom CSS, but if the platform itself does a lot of manipulation with javaScript (like scaling images on screen-resize for example): this will make life difficult if you are also trying to tweak the layout. If you are satisfied with tweaking values for properties like colors, background-colors this wouldn’t be that much of an issue, but if you are also a visual thinker, someone with a high aesthetic sensibility who gets a kick out of “making things look pretty” and want to line things up the way you want, these limitations will likely be annoying.

Taking a few steps back could be starting from scratch without any template, with plain HTML and CSS on a small project, while at the same time reading up on everything thing/problem you encounter.

Some resources on CSS layout with media-queries.

• Learn Layout
• this article and the book by Ethan Marcotte with the same name are classics

[s_cristina]

Well that would be a really big step back.. I had now 3 months to do this page. I can’t throw all this away and start from scratch. There has to be a way…

[Beverleyh]

It’s an awkward situation but I agree with Atelierbram; if you want to tackle this yourself, it’s worth starting back at the beginning so that you understand the fundamentals of responsive design (making your own website from scratch is a good way to do this). Yes, this will take time, but it will give you the best foundation for creating completely bespoke sites/layouts, or making more complex customisations from existing templates, etc.

On the other hand, if time is of the essence, you could consider hiring somebody (who’s already gone through the lengthy learning processes, so you don’t have to) and have them do the work/troubleshooting for you instead. Maybe this could be an option on this particular project, giving you time to reasearch/learn, ready for your next one?

But much depends on what your expectations are in asking for help on free online forums. Are you happy with advice and suggestions (something to base your further research on) or do you anticipate plug-and-play code (where someone else has done the heavy-lifting and testing on your behalf)? Maybe somebody will see this thread and fix up your website for you… who knows… it’s possible, but unlikely.

Maybe it would help if you tell us what your expectations of us are?

[Atelierbram]

And what were the expectations and/or reasons for picking the platform you’re on with the current template? But honestly, I don’t know if there is a better platform or CMS out there for, let’s say, “creative professionals”. I have this rant brooding inside of me for years now which might turn into a blogpost some day, TLDR: “the threshold for beginners in webdesign has become very high because “responsive webdesign” requires a dedicated effort to learn, can get complicated very fast, and can be hard work to maintain (even harder when you are not doing it ‘mobile first’)”.

I do think it’s a shame if creative professionals are discouraged or are having such a hard time creating there own portfolio-sites. Because this does add some extra flavour, character and much needed variety to the web. But, like mentioned in the comment above, one can try to hire someone else. Or ask a webdesigner-friend to make it for you: swap services, you make her a painting, illustration, whatever-you-do, she makes you a website.

The CSS of the demo code you posted has most overriding declarations on layout. Like I wrote earlier this is a tricky path to go on with this platform. Have you thought about changing templates? Take your loss; choose a template which layout fits your needs best (- now that you have a better informed idea what it is that you want from the layout -) , and then just override values for color, background-color and so on, in your custom CSS. Forget about padding, width, height and so on, even though they are !important ;|

[s_cristina]

You all were right… I did everything from scratch and now is going better.

[Author]

Posts