Jump to content

GregOvens

Member
  • Posts

    24
  • Joined

  • Last visited

Posts posted by GregOvens

  1. Hello,

    I would like to ask you how could I change the button font size for specific button and only to be applied to Desktop and Tablet screens. I attached the screenshot of the buttons I would like to control the font size for. Thank you.

    I tried this code but it seems to now work as I would expect:
    @media (min-width: 768px) {
      #block-yui_3_17_2_1_1714385759270_25383 {
        font-size: 1.6rem;
      }
    }


    URL: https://www.slovakspots.com
    Password: Ulicajekrasnydom


    Best Regards,

    Milos

    Snímka obrazovky 2024-07-24 o 13.30.21.png

  2. Hello all,

    I am struggling with managing the layout of my blog post. I split the first text field to two columns which looks good on PC, but one mobile phone there is too big space between two columns. 

    It is caused by the fact I used empty paragraph at the top of the second column on right side. So it is allight with the left column text.

    But on mobile phone there is too big space between them.

    - Is there a way how this can be fixed for all blog post by one code? 
    - Because my website contains multiple blogs from which blog contains a lot of blog posts, there fore I can't inject a CSS for each  individual blog post.

    URL: https://www.slovakspots.com/bratislava-food/blog-post-title-one-8g8z2-jjcrb-42dm9
    Password: Ulicajekrasnydom

    Thank you in advance! 🙂 
     

    Snímka obrazovky 2024-06-27 o 9.47.21.png

    Snímka obrazovky 2024-06-27 o 9.51.06.png

  3. @Beyondspace Hi, that's me again. With regards, to my second question related to gradient.

    I was able to apply following code. But I can't figure out how could I handle the width of the gradient to act properly. Because when I use width: 100%, gradient is applied out of the element box (see the screenshot). If I used les than 100% it do not fit during resizing of the screen. Is there a way how it could be applied better to actually fit the width of my elements.

     

    */
    .fe-block-b7bc86a8c863fa679d9d ~ .fe-block .sqs-block-html .sqs-block-content h2 {
      text-align: left !important;
      padding-left: 10px;
      padding-bottom: 4px;
      display: inline-block; /* Makes the gradient visible behind the text */
      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      width: calc(100% - 2.4px);
    }

    .fe-block-b7bc86a8c863fa679d9d ~ .fe-block .sqs-block-html {
      justify-content: flex-end;
    }
     

    Snímka obrazovky 2024-06-20 o 12.25.28.png

  4. @Beyondspace thank you very much! Provided code helped me a lot. 

    I would like to ask you whether would be possible to implement the css code which would on those pages apply gradient collor over image.

    I would like to make the title in the lower part of the picture more readable because the black gradient in that part of the picture would already be quite intense. I attached also screenshot of what effect I have in my mind. 

    Thank you a lot! 🙂 

    Snímka obrazovky 2024-06-19 o 13.26.50.png

    Snímka obrazovky 2024-06-19 o 13.32.39.png

  5. Hello guys, I would like to ask you for help.
    I would like to update the position of the text from the center to the left bottom coroner, with small padding from the left and bottom border. Same already have for blog posts.

    First screenshot is current position of the text
    Second screenshot is the position how I would like to apply it.

    URL-1: https://www.slovakspots.com/bratislava

    URL-2: https://www.slovakspots.com/banska-stiavnica

    URL-3: https://www.slovakspots.com/more-cities-landing-page

    Password: Ulicajekrasnydom


    Thank you very much! 🙂 

    Snímka obrazovky 2024-06-08 o 9.42.11.png

    Snímka obrazovky 2024-06-08 o 9.42.26.png

  6. Hi @tuanphan I tried your solution to implement for a blog posts, which contains a Grid gallery. But for some reason the code do not work for me.

    I would like to make gallery within blog posts (in general) to display content on mobile devices within 1 column.

    URL: https://www.slovakspots.com/bratislava-accommodation-1/hotel-devin
    Password: Ulicajekrasnydom

    Thank you for your help! 🙂 

  7. Hello,
    could you please help me to adjust the box for title of the blog post. 

    I would like to achieve, that it would be placed 5 px from the left, bottom and right side of the image. Currently the text is adjust only from left and bottom side. Basically from what I have now I would need to just move the right border of the title text component inside of the image (on the first screenshot you can see the border is out of the image). And my goal is displayed on the second image.

    This is my current code injected:
    // DESKTOP - Blog List - Title always at the bottom left
    .blog-basic-grid--text {
        position: absolute;
        bottom: 0;    // Position at the bottom of the container
        left: 0;      // Align text to the left side of the container
        text-align: left; // Ensure text aligns to the left
        transform: translateY(0%); // Adjust transformation
        padding-left: 10px; // Add padding for better visibility
        padding-bottom: 5px;
        opacity: 1;    // Text always visible
        transition: all 0.5s;
      }

    // MOBILE - Blog List - Title always at the bottom left
    @media only screen and (max-width: 767px)
    {
    .blog-basic-grid--text {
        position: absolute;
        bottom: 0;    // Position at the bottom of the container
        left: 0;      // Align text to the left side of the container
        text-align: left; // Ensure text aligns to the left
        transform: translateY(0%); // Adjust transformation
        padding-left: 10px; // Add padding for better visibility
        padding-bottom: 16px;
        opacity: 1;    // Text always visible
        transition: all 0.5s;
      }
    }


    URL: https://www.slovakspots.com/magazine
    Password: Ulicajekrasnydom

    Thank you in advance! 🙂 

    Snímka obrazovky 2024-05-12 o 10.06.29.png

    Snímka obrazovky 2024-05-12 o 10.07.16.png

  8. Hello all, 

    Could you please advise me how could I adjust the space (padding?) between bottom of the image and bottom of the title which is placed on top of the image?

    I would like to match the padding which you can see between left side of the image and title.
    This code should be used for all blogs on my website in general and only for mobile devices (as you can see for desktop it looks ok)


    URL: https://www.slovakspots.com/bratislava-accommodation-1
    Passwords: Ulicajekrasnydom

    Thank you in advance! 🙂 




    image.thumb.jpeg.edd0fe8e0495d646775da2613e286d4f.jpeg
     

    Snímka obrazovky 2024-05-10 o 12.54.43.png

  9. @Beyondspace In first place, thank you for your help!
    Your approach is good, but I would rather inject code which could expand the dropwdown list based on number of items within dropdown. 

    Would it be possible to create code which would be not linked to specific Archive? But it could be used for all archives within my website?

    I am planning to have more blogs which would utilise same framework. 🙂 

     

  10. Hello all,

    could you please help me to solve the issue with Archive dropdown list. 
    I would like to make the list wider once the column (number of items in column) is bigger than 4.
    So if there would be 12 items, list would have 3 columns (4 items in each).

    Here is URL: https://www.slovakspots.com/bratislava-accommodation-1
    Password: Ulicajekrasnydom

    Thank you very much in advance. 🙂 image.thumb.png.1ef1fde871461a2e6dca2adc73bfe78e.png

  11. Hello,

    I would like to ask you for help.
    Is it possible to make my images clickable even they are fully covered by text box?

    1. I would like to make them clickable so the URL which is linked to the image works even they are fully covered by text.

    2. I would like to also add the hover effect to slightly make the image lighter one the mouser hover over the image.

    Would it be possible to create the css code which could be applicable not for shared URL but also for other pages which are basically copies of shared one? 

    Here is the URL: https://www.slovakspots.com/bratislava
    Password: Ulicajekrasnydom

    Thank you very much for your help!

  12. Hello,

    I would like to ask if there is some way how could I put custom character (red star) or small png icon to some of the blog post displayed on the blog grid. I would like to place it in the left top corner.

    I would like to highlight some blog post by doing this.

    On first screenshot is the sample of the design I trying to achieve.
    On the second one is my current design.

    How could I select to which blog post within the grid I would like to place the icon?


    Tahnk you very much for any help.
    Greg

     

    IMG_8DDC68B6D3F1-1.jpeg

    IMG_25EDB7352417-1.jpeg

  13. Hello,

    I would like to ask for your help related to following topics. I would prefer the solution which could be applied to the whole site not just specific blog post:

    1. How could I reduce the margin in Comment section (renamed to "How did you like this spot?"), between Header and Text input box? On desktop it looks ok, but for some reason on mobile device there is really ugly space between them.

    2. Is it possible to also reduce the space between code block above comment section and comment section itself? In this case for both mobile and desktop.

    3. Is it possible to match the comment header font size to the h2 used across blog spot. But without making it to big for mobile devices? I was able hard-coded the font size same as I am using for h2, but you can imagine how ugly and big it was on mobile screen.

    Thank you for your amazing advices here on forum! 

    Snímka obrazovky 2024-05-03 o 11.15.03.png

    Snímka obrazovky 2024-05-03 o 11.19.19.png

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.